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