Conception des logiciels interactifs

Conception des sites web

Cours 4

1

M2-IFL/DU-TICE, UPMCElisabeth.Delozanne@upmc.fr

http://www.lutes.upmc.fr/delozanne/2009-2010/M2-IFL-DU-TICE-09-Accueil.htm

Conception des sites web

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/� J. Nielsen• Téléchargement rapide, Régularité des mises à jour, Utilisation facile du site, Contenu de qualité, Simplicité

3

• Téléchargement rapide, Régularité des mises à jour, Utilisation facile du site, Contenu de qualité, Simplicité

• http://www.useit.com/• A. Boucher• Un site bien rangé, Des pages bien rangées, Capitaliser sur l’apprentissage interne (cohérence) et externe (conventions et standards), Informations et feeback, Mots et symboles simples et clairs, Assistance, Droit à l’erreur, Gain de temps, Liberté, Accessibilité, Satisfaction (utilité, esthétique, service, fiabilité)

• http://www.ergolab.net

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

4

Accessible le 5/3/07 à

http://www.keynote.com/docs/datasheets/StopLosingCustomers.pdf

Plan�Spécificité des sites web�Processus et techniques de conception�Conception de la structuration�Conception des pages

5

�Conception des pages�Conception de la navigation�Conception des formulaires

GUI Design vs Web design (1)Qu'est-ce qui change ?�Très grande variabilité des ressources physiques

� L'usager contrôle la navigation

6

� L'usager considère le Web dans son ensemble davantage qu'un site spécifique

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

7

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

GUI Design vs Web design (3)� L'usager contrôle la navigation

� Accès par la page d'accueilmais plus souvent • par moteurs de recherche ou marques pages

� Fournir contexte et navigation

8

� 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

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

9

et ne sont pas complètement standardisées�Des interfaces différentes

� Navigation vs Manipulation directe � Peu d'interactivité� Pas de contrôle du concepteur sur l'environnement client

Différentes tâches

Evaluation

ergonomique

Ciblage

Processus

de mises à

jour Rédaction

Du contenu

DéveloppementSite

10

ergonomique

Copyright

Stratégie

commercial

eSécurité

Design

graphique

Développement

informatique

Configuration

matérielle, réseau

D’après J-F Nogier

SiteInternet

Les compétences (J. Landay)

Information Architecture

User InterfaceDesign

Usability Evaluation

11

Information Design

Navigation Design

Graphic Design

Une équipe� Les partenaires

� Marketing� Communication� Ergonome� Infographes

12

� Infographes� Rédacteurs� Ingénieur IHM� Développeurs� Ingénieur bases de données

� Règles d'or� Communiquer� Former

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

14

� Déterminer les caractéristiques des utilisateurs et leurs tâches

Document à la fin de l’étape

� Site :

� Buts du site :

� Contraintes :

15

� Critères de succès :

� Catégories d’utilisateurs (personnages) :

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

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

16

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

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

17

�Développer la conception� Maquette conceptuelle• Entrer dans les détails (Cf. Design Patterns)

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

Production�Finaliser la conception

� Livrer la charte graphique� Le cahier de spécifications, les recommandations et des prototypes

� Soigner les détails

18

� Soigner les détails� Être aussi précis que possible

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

19

� 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

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/

20

http://www.synergies-publiques.fr/� Ergonomie Web, Nicole Lompré (11/11/08)http://web.univ-pau.fr/~lompre/liens/liens.php� Ergolab (Amélie Boucher)http://www.ergolab.net

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� Netway : http://www.net-ways.com/

21

� 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

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)

22

Conception et développement (en français)� http://www.alsacreations.com/

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é

23

� 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

Exemples de DP� Structure du site

� Navigation d’ensemble (top-level)� http://www.time-tripper.com/uipatterns/Toplevel_Navigation

� Conception des pages

24

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

� Formulaires

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

25

� 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

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

26

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

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)

27

� 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

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

28

B

C

D

A

E

D

CB

A

Un cas d’école…

29

Tout ça pour rien !

30

Règle d’or

Tout doit être accessible en 3 clics

Qu’en pensez-vous ?

31

Qu’en pensez-vous ?

Pensez aux parcours des utilisateurs

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

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

32

� 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

DP de navigation

� Exemples : the design of siteB1: Multiple Ways to NavigateB2: Browsable ContentB3: Hierarchical OrganizationB4: Task-Based OrganizationB5: Alphabetical Organization

33

B5: Alphabetical OrganizationB6: Chronological OrganizationB7: Popularity-Based OrganizationB8: Category PagesB9: Site Accessibility

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

34

� 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

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

35

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

Exemples (ancien)

36

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 lienPlacer les liens sur les mots clés

37

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

� L'intitulé du lien = titre de la page accédée

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)

38

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

39

• 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

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

40

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

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)

41

(encore un DP)• Apprenez à connaître vos utilisateurs- Enquêtes, études de terrains- Graphismes et couleurs– Site de skateboards/ site bancaire

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

42

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

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)

43

• 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

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

44

� Utiliser du texte� Utiliser des images petites et compressées� Utiliser du graphique léger� Utiliser un nombre réduit de colonnes

Free

45

Free en 2008, en 2009 ?

46

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

47

• Faciles à utiliser• Qui se parcourent vite

� Solution� Donner les conclusions en premier� Proposer des détails ensuite pour ceux qui en veulent

Pyramide inversée (2)

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

48

Informations moins importantesDétails, Citations longues

Pyramide inversée (3)

49

Les conseilleurs en 2004

50

En 2009

51

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

52

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

Qui fait ce site ?� http://www.education.fr

53

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 constructionPas d’ascenseur en largeur

54

� 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

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

� Éviter 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

55

� 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://interaction2.free.fr/• http://www.vrrh.ulaval.ca/sante/couleurs.html• http://interface.free.fr/Interface/Couleur.html

Accessibilité visuelle� Outils en lignehttp://www.vischeck.com/www.etre.com/tools/colourcheckwww.snook.ca/technical/colour_contrast/colour.html

56

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

57

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

Formulaires� Un bon cours (2008, en anglais) : Luke Wroblewskihttp://www.lukew.com/resources/articles/WebForms_LukeW.pdf

� Un document (2004, en français) : Amélie Boucherhttp://www.ergolab.net/articles/ergonomie-formulaire.phphttp://www.ergolab.net/articles/ergonomie-formulaire.php

58

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

59

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

Sncf

60

Virgin atlantic

61

Air France

62

Référencement

� Très important

63

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 à

64

• 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

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

65

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/

Les clés du succès

1. Investissez dans le contenu, Renouvelez le contenu2. Respectez les standards3. Soignez la navigation4. Évitez les pages trop lourdes, les modes techniques, les"pages tunnels"

66

"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 site9. Optez pour un design sobre10.Soignez les détails, la lisibilité11.Faites-vous connaître grâce au référencement

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

67

d’autres� Réserver votre créativité sur des innovations qui en valent la peine