1
Conception des logiciels interactifs
M2-IFL/DU-TICE, UPMC
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
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) et externe (conventions et standards)
4. Informations et feedback (communication) 5. Mots et symboles simples et clairs (compréhension) 6. Guidage et aide 7. Droit à l’erreur 8. Gain de temps 9. Liberté 10.Accessibilité 11.Satisfaction (utilité, esthétique, service, fiabilité)
3
4
Plan
Processus et techniques de conception
Conception de la structuration
Conception des pages
Conception de la navigation
Conception des formulaires
5
Différentes tâches
Evaluation
ergonomique
Ciblage
Processus
de mises à
jour
Copyright
Stratégie
commerciale Sécurité Design
graphique
Rédaction
Du contenu
Développement
informatique
Configuration
matérielle, réseau
D’après J-F Nogier
Site
Internet
6
Les compétences (J. Landay)
Information
Architecture
User Interface
Design
Usability
Evaluation
Information
Design
Navigation
Design
Graphic
Design
7
Une équipe
Les partenaires
Marketing
Communication
Ergonome
Infographes
Rédacteurs
Ingénieur IHM
Développeurs
Ingénieur bases de données
Règles d'or
Communiquer
Former
8
Cycle de conception (Landay 2004)
9
Techniques de conception (rappel)
Les techniques
Cartes à trier : objets métier, libellé, structuration
Scénarios : vue utilisateur, tâche, contexte
Plan du site : vue d'ensemble de haut niveau
Story boards : séquence d'interaction, niveau page
Schémas : structure de page, navigation et information
Maquettes : haute-fidélité, représentation très précise
10
Où trouver le savoir-faire ? (1)
Regarder les sites
Sites communautaires et services publiques
Europa, impôts
Universités UPMC, Sydney, Berkley
Les pros
Livre Ergonomie Web illustrée (A. Boucher)
Adobe (http://www.adobe.com/fr/), Google
Commerce
Nike, Coca-cola, Renault
Amazon, La redoute …
Voyages
Air France, Sncf, Virgin Atlantic
11
Où trouver le savoir-faire ?(2)
Recommandations de conception (pas récents, principes de base) W3C accessibilité http://www.w3.org/2003/03/Translations/byLanguage
?language=fr Accessiweb (2012) http://www.accessiweb.org/ Pour les sites de l’administration française http://references.modernisation.gouv.fr Ergonomie Web, Nicole Lompré http://web.univ-pau.fr/~lompre/liens/liens.php Ergolab (Amélie Boucher) http://www.ergolab.net
12
Où trouver le savoir-faire ? (3)
Design Patterns (liens testés le 1/12/2013)
Livre : The Design of Sites, Doug Van Duyne, James Landay, Jason Hong
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/
Nouvelles tendances UX et ergonomie de IHM
http://vimeo.com/flupa/videos/
13
Design Pattern ?
Inventeur : Alexander (architecte (1977)
Objectif
Ne pas réinventer la roue
Bénéficier de l'expérience accumulée
Réutiliser des schémas de conception qui ont prouvé leur efficacité
Description de problèmes et de leurs solutions
ou plutôt de schéma de solutions à adapter au contexte
Utilisation :
Éducation, Jeux Sérieux (équipe Mocah)
Génie logiciel, modélisation objet (Gamma et al. 1995, Craig etc.) : standard
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/
14
15
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
16
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
17
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
18
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
19
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
20
Navigation
élément ESSENTIEL
lien clairement identifié
simple à comprendre
identique sur tout le site
les internautes peuvent arriver sur une page autre que votre page d'accueil
des options de navigation sur toutes les pages
toujours un lien vers la page d'accueil
« miettes de pain »
moteur de recherche sur le site
21
Les liens
Un lien doit être clairement identifiable
Pour une image : ajouter un texte alternatif
• pour les navigateurs non graphiques et les publics à besoin spéciaux (Standards W3C : 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
22
Les liens
Le comportement des liens doit être cohérent
Un même texte doit toujours conduire à la même page
Une même page doit toujours être désignée par le même texte
Les liens visités doivent changer de couleur
Les intitulés de parties non encore accessibles doivent être grisées
(clairement inaccessibles)
Pas de page et panneaux en construction
Ne pas nommer de bouton « page précédente »
Les liens doivent être suffisamment grands
Pas d’utilisation du soulignement autre que pour les liens
23
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 fournissent un «
favori » explicite
Dates de mises à jour
Responsable éditorial
le document doit être signé
Adresse électronique du Web master : obligatoire
Chaque page doit établir le contexte du document
Miettes de pain (Petit Poucet)
24
Modèle de page
Unique pour l'ensemble du site
Standard obligatoire
Seuls les liens sont soulignés Les liens sont de couleur différente L'important : bonne visibilité (en fonction du fond d'écran)
Pas de pages vides ou en construction
Pas d’ascenseur en largeur
jamais de double ascenseur (horizontal et vertical)
Les animations Ne pas abuser Pas d’animation trop voyante Pas d’animation à côté d’un texte à lire Possibilité de stopper l’animation
25
Typographie
Lecture à l’écran : police sans empattement
Exemples : Helvetica, Verdana, Comic, Calibri
Contre-exemple : Times, Book Antigua
Moins de 3 polices différentes
Sémantique bien définie à chaque police/couleur
Éviter
italique, majuscule
EXEMPLE EXEMPLE exemple exemple
Jamais de souligné (sauf lien) : exemple exemple
Lisibilité
Taille 12 au minimum (texte courant)
Augmenter l’interligne (1.5)
Aligner à gauche (jamais justifier)
Les couleurs
(Cf : cours 1 bis)
Cours en ligne sur les couleurs
http://ergonomie-web.studiovitamine.com/couleur-web,362,fr.html
Minimiser le nombre de couleurs sur une même page
• Effet arbre de noël
Rester très sobre pour la couleur de fond
Penser aux déficients visuels
Toujours utiliser un double codage : couleur + autre
26
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
27
28
Présentation des pages
Graphisme
Vecteur important de communication
• pour la fidélisation du visiteur
• renforce le message véhiculé par le texte
Définir une charte graphique
• Définir les modèles de pages
• Style de présentation des titres et du texte
Feuilles de style
Possible avec HTML grâce au CSS
Objectif : Séparer le fond de la forme
• Garantie 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
Le complément du cours 4 spécial formulaire
29
30
Référencement
Très important
31
Encore les utilisateurs…
Vérifier que le site fonctionne correctement sur
différents environnements
Interactions avec l'utilisateur
Fidélisation
• Penser à proposer aux utilisateurs l'inscription à une liste pour être avertis des nouveautés
Évaluation
• Offrir la possibilité aux utilisateurs de donner leur avis sur le site
Penser à enregistrer le nombre de visites sur chacune
des parties du site
32
Les clés du succès
1. Investissez dans le contenu, Renouvelez le contenu
2. Respectez les standards
3. Soignez la navigation
4. Évitez les pages trop lourdes, les modes techniques, les "pages tunnels"
5. Rendez le site disponible
6. Répondez aux courriels, fidélisez grâce aux courriels
7. Offrez une carte de votre site
8. Optez pour un design sobre
9. Soignez les détails, la lisibilité
10.Faites-vous connaître grâce au référencement
33
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