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

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