Conception & Ergonomie du Web - PowerPoint PPT Presentation

Loading...

PPT – Conception & Ergonomie du Web PowerPoint presentation | free to download - id: 3e0c51-NmU1Y



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Conception & Ergonomie du Web

Description:

Conception & Ergonomie du Web Cedric.Dumas_at_emn.fr contrat Creative Commons Paternit -Pas d'Utilisation Commerciale-Partage des Conditions Initiales l'Identique 2 ... – PowerPoint PPT presentation

Number of Views:56
Avg rating:3.0/5.0
Slides: 57
Provided by: emnFrzau
Learn more at: http://www.emn.fr
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Conception & Ergonomie du Web


1
Conception Ergonomie du Web
Cedric.Dumas_at_emn.fr contrat Creative Commons
Paternité-Pas d'Utilisation Commerciale-Partage
des Conditions Initiales à l'Identique 2.0 France
License
2
Internet (Intranet et Extranet)
  • Moyen de communication
  • Décentralisé
  • Ouvert
  • Grand public et professionnel
  • Sur le web, lutilisateur contrôle lusage

3
Utilisabilité
  • Possibilité de naviguer
  • Capacité de se repérer
  • Impact sur la fréquentation
  • Site les plus populaires ne pose pas de problèmes
    majeurs dutilisabilité
  • Pas de cadres (Frames)
  • Temps de chargement très court

4
Client ?
  • Internaute
  • Commerce en ligne
  • Site lourds / compliqués (Ebay)
  • Problème des formulaires (longs, incompréhension)
  • Pas de fidélisation, découragement, préjudice à
    limage de la société, etc
  • IBM, 1998 homogénéité, accés rapide, 120k/1M
  • 120 en mars 1999

5
Entreprise
  • Communiquer
  • Echanger (patrimoine)
  • Partager (communauté)
  • Référentiel
  • Culture dentreprise
  • Même problème de design énervement, perte de
    temps, stress, gaspillage, etc

6
Pourquoi tant de problèmes potentiels ?
  •  plateforme de convergence entre linformatique,
    les télécommunications et laudiovisuel  (JF
    Abramatic, INRIA)
  • marketing
  • infographie
  • ergonomie
  • etc

7
Retour en arrière ?
  • Interfaces des années 70, formulaires, peu de
    composants, peu dinteraction directe, pas
    dinteractions spécialisées, etc
  • Web
  • Dynamique
  • Utilisateur pas propriétaire de lappli
  • Utilisateur navigue et parcoure linformation
    (butine)
  • Plus gros potentiel derreurs
  • Beaucoup de catégories dutilisateurs
    potentielles

8
Ciblage
  • Ciblage du site
  • Cahier des charges
  • Enquêtes
  • Etudes de marché (analyse de la concurrence)
  • ? Interviews, questionnaires, groupes de
    travail,etc.
  • Etude utilisateurs
  • Attentes, contexte dutilisation, objectifs
  • Existant (web ou autres moyens)

9
Utilisateurs
  • Tranche dâge, professions, connaissances, etc.
  • Matériel plateforme, navigateur, bande
    passante, etc.

10
Communication
  • Fonction des objectifs
  • Fonction des messages à transmettre
  • Retour
  • Fréquentation
  • Analyse des visites
  • Enquêtes

11
Check-list (IBM Webdesign guidelines, 1999)
  • Lobjectif du site est-il clair ?
  • Laudience du site peut-elle clairement
    sidentifier ?
  • Le Site est-il utile et pertinent pour ce public
    ?
  • Le Site est-il intéressant ?
  • Le Site permet-il aux visiteurs de réaliser
    toutes les tâches quils veulent accomplir ?
  • Les visiteurs peuvent-ils accomplir facilement
    ces tâches ?
  • Le contenu et lorganisation des informations
    sont-ils cohérents avec lobjectif du site ?
  • Linformation importante est-elle facile à
    trouver ?
  • Toutes les informations sont-elles claires,
    faciles à comprendre et à lire ?
  • Le visiteur sait-il toujours où il est et comment
    faire pour aller où il veut ?
  • Le graphisme est-il agréable ?
  • Les pages se chargent-elles suffisamment vite ?

12
Architecture de communication
Objectifs de communication
Services
  • Construire - les réponses - les services
  • Identifier - les besoins - les questions

Décrire larborescence du site en incluant pour
chaque pages les services, la cible et
lobjectif.
13
Cycle de développement simplifié
Analyse du besoin
Architecture de communication
Charte graphique / Protocole de navigation
Prototypage
communication marketing utilisabilité graphique ré
daction développement
Développement
Référencement / Mise en ligne
Attention à la gestion de la vie du site
Maintenance /
14
Evaluation
  • Prototype horizontal le langage, la structuration
    du dialogue, la charte graphique, etc
  • Prototype vertical les services, la plateforme,
    les tâches réelles (mise en situation,
    verbalisation)
  • Protocole de navigation chemin le plus court,
    repérage, orientation, mémorisation
  • Mesure de performance (efficacité du site) temps,
    taux de réussite, taux derreurs, etc.
  • Compréhension compréhension de linformation,
    importance relative

15
Qualité
  • Comportement fonctionnel
  • Liens morts
  • Liens externes
  • Cohérence des liens
  • Rendu cohérent
  • Plateformes (OS, résolution, écran, etc)
  • Temps de transfert / chargements (30s 10s à 8s)
  • Navigateurs
  • Syntaxe
  • Normes
  • Complet (texte alternatif aux images, etc)

16
Vie du site
  • Catalyseurs
  • Nom du site
  • Pub/information/annonce (Internet et autres
    médias)
  • Référencement (Meta, titre, page accueil, etc)
  • Mise à jour
  • Amélioration de la plateforme Rideau de
    construction, liens externes, statistiques,
    dialogue (questions, réponses, etc)

17
La page daccueil
18
Agencement de la page
  • Disposition régulière
  • Alléger les pages
  • Utiliser une résolution décran moyenne
  • Zone protégée de 640x480
  • Eviter les barres de défilement
  • Eviter les cadres
  • Page courte facilite la lecture (0ltxlt50 lignes)
  • Retour en haut de page
  • Navigation locale, répétée

19
Charte graphique
  • Une charte pour tout le site
  • Feuille de style (avec et sans)
  • Critère déterminant dadhésion
  • Vecteur de communication important
  • Fonds de page dégradés, clairs
  • Utiliser des images lorsque cest utile
  • Minimiser leur taille (qualité gt taille)
  • Palette web-safe
  • Animations avec parcimonie, sans texte à
    proximité
  • 2 ou 3 polices maximum, taille en relatif

20
Contenu
  • Utilisateurs parcourent
  • Faire ressortir les éléments clés du texte gras,
    puces, liens (attention au texte)
  • Lisibilité Justifié à gauche, important en haut
    de page, imprimable
  • Concision essentiel, rédiger simplement, être
    objectifs, paragraphes courts, conclusion/résumé
    au début (pyramide inverse)
  • Netiquette

21
Communication
  • Communication
  • Artistique (œuvre visuelle et sonore)
  • Interactif

22
www.ebay.fr
  • Page accueil très chargée
  • Trop de zones
  • Listes redondantes
  • Liens sans explication

23
www.ebay.fr
Page postérieure à létude de Nielsen (55 des
problèmes résolus)
24
www.ibm.com
  • Grosse entreprise
  • Dualité du site (entreprise site marchand)
  • Nombreux points dentrée
  • Navigation par type de client
  • Quête de simplicité (liens succincts, textes
    minimaux)

25
www.ibm.com
26
Top Ten Mistakes in Web Design
  • Jakob Nielsen Alertbox http//www.useit.com 199
    6

27
Using Frames
  • confusing for users since frames break the
    fundamental user model of the web page
  • you cannot bookmark
  • URLs stop working
  • Printouts become difficult
  • the predictability of user actions

28
Gratuitous Use of Bleeding-Edge Technology
  • useful content
  • good customer service
  • Versus technology

29
Scrolling Text, Marquees, and Constantly Running
Animations
  • Moving images have an overpowering effect on the
    human peripheral vision
  • peace and quiet to actually read the text
  • NO BLINK

30
Complex URLs
  • a URL should contain human-readable directory and
    file names that reflect the nature of the
    information space
  • Navigation, Sens of location gt decode !

31
Orphan Pages
  • Liens vers la page originale
  • Info sur la localisation sur le site
  • Infos sur le contenu du site (liens directs vers
    les pages de lextérieur)
  • Pas de pages orphelines

32
Long Scrolling Pages
  • Only 10 of users scroll beyond the information
    that is visible on the screen
  • 1996, mieux maintenant, mais minimisez !

33
Lack of Navigation Support
  • Don't assume that users know as much about your
    site as you do.
  • support in the form of a strong sense of
    structure and place
  • communicate this structure explicitly to the
    user.
  • Site map
  • And a good search feature !

34
Non-Standard Link Colors
  • Link not been seen by the user blue
  • links to previously seen pages purple or red
  • Consistency is key to teaching users what the
    link colors mean.

35
Outdated Information
  • New content !!!
  • Mais aussi
  • Maintenance
  • Mise à jour
  • Retirer les pages/informations obsolètes

36
Overly Long Download Times
  • Traditional human factors guidelines indicate 10
    seconds as the maximum response time before users
    lose interest.
  • . On the web, users have been trained 15 s for
    a few pages

37
3 ans plus tard 1999
  • Frame ? navigation (back), print, bookmark mais
    toujours le problème des URLs
  • Bleeding-edge technology ?
  • S. T. anim ? volonté de se différencier, etc.
  • Complex URLs ? amélioration des syst. Nav.
  • Orphan pages ? super user réécrivent les urls
  • Scrolling navigation pages mitigé, usable si
    bien gérée
  • Lack of navigation support ? recommendations et
    habitudes non respectées (logo en haut à gauche)
  • Non-standard link colors ? même problème
  • Outdated information ?? pire, trust ltgt
    credibility
  • Slow download times ?? fantasmes sur BP

38
Top Ten Web-Design Mistakes of 2002
  • Jakob Nielsen Alertbox http//www.useit.com 200
    2

39
No Prices
  • B2B oublis fréquent
  • B2C oublis dans les listes, les résultats de
    recherche, etc

40
Inflexible Search Engines
  • literal search engines reduce usability
  • unable to handle typos, plurals, hyphens, and
    other variants of the query terms
  • Result how many query terms they contain

41
Horizontal Scrolling
  • Users hate scrolling left to right
  • Optimized for 805-pixel-wide

42
Fixed Font Size
  • Style sheets problem
  • 95 temps trop petit
  • Problème plateforme
  • Problème âge utilisateurs

43
Blocks of Text
  • A wall of text is deadly for an interactive
    experience. Intimidating. Boring. Painful to
    read.
  • Write for online, not print
  • subheads
  • bulleted lists
  • highlighted keywords
  • short paragraphs
  • the inverted pyramid
  • a simple writing style, and
  • de-fluffed language devoid of marketese.

44
JavaScript in Links
  • Users hate unwarranted pop-up windows.
  • Users deserve to control their own destiny.

45
Infrequently Asked Questions in FAQ
  • Too many websites have FAQs that list questions
    the company wished users would ask.
  • They must be reserved for frequently asked
    questions.
  • Question of trust.

46
Collecting Email Addresses Without a Privacy
Policy
  • Every time a website asks for an email address,
    users react negatively in user testing.
  • Don't assume that people will sign up for a
    newsletter just because it's free.
  • you must provide an explicit privacy statement or
    an opt-in checkbox right next to the entry field
  • Except joe_at_yahoo.fr ou mickey_at_mouse.com

47
URL gt 75 Characters
  • Long URLs break the Web's social navigation
  • Impossible à envoyer par mél
  • À retenir
  • À copier/coller
  • Bad way to lose business

48
Mailto Links in Unexpected Locations
  • Attente sur un lien
  • Aller vers une nouvelle page
  • Ouvrir un programme de mél pour écrire plutôt que
    lire
  • Ancre explicite
  • Pas sur des noms (pages web perso)

49
Remarques
  • Le Mél
  • 3 dernières
  • Le plus vieux, le plus utilisé
  • À intégrer avec le web

50
Pratique de lutilisabilité
  • "Quoi faire ?" Plutôt que "Comment le faire ?"

51
Usability
  • Utilisabilité, critère de choix
  • Dévelopement
  • Réduction des coûts
  • Intégration de lutilisateur final
    consolidation
  • 70 à 80 des coûts sont engagés au début du
    projet
  • Éviter les retours arrières (surcoût)
  • Critère dacceptation du produit final
  • 48 à 80 du code internet développé
  • Pratique 6 du coût dun projet (faible /
    enjeux)
  • Globalement, améliore la ré-utilisabilité des
    composants (enrichissement, cycle damélioration)

52
Difficile à quantifier ?
  • Thomson Multimédia
  • Télécommande, 1988
  • DSS
  • Recepteur satellite, 1994
  • Nokia
  • Téléphone portable, 2000
  • Amélioration minime gros gain quand beaucoup
    demployés
  • ? Productivité (entreprise utilisatrice)
  • ? Attractivité (entreprise vendeuse)

53
Méthodes dévaluation ergonomique
  • Inspection (passage en revue des composants)
    critères ergonomiques ?
  • Heuristique (inspection basée sur la compétence
    et les connaissances de lévaluateur)
  • Evaluation coopérative prototype ou
  • Observation
  • Verbalisation

54
Méthodes dévaluation ergonomique
  • Test dutilisabilité
  • Valider les 3 critères
  • Efficacité (utilisateur peut réaliser sa tâche)
  • Efficience (avec un minimum de ressources)
  • Satisfaction (agréable à utiliser)
  • Contexte proche situation réelle (pas aider ni
    rien)
  • Observation, mesure, questionnaires
  • Comportement comment il navigue, les infos
    quil cherche
  • Performance temps, erreurs, impasses,
    évolution,
  • Analyse à chaud après
  • Protocole ! (même test pour chacun)
  • Consigne, objectifs, plateforme, conditions, etc

55
Test ?
  • Évaluer le logiciel, pas lutilisateur
  • Définir des objectifs précis pour les tests
  • Panel dutilisateurs représentatifs
  • Nielsen (Alterbox, 2000) Why you only need to
    test with 5 users Test avec 5 utilisateurs lèvent
    80 des problèmes dutilisabilité (pour un
    groupe donné dutilisateur, en améliorant à
    chaque fois)
  • Attention à vous développeur ltgt utilisateur
    ! (! Compétences, ! Techno, ! PDG)

56
Conclusion
  • Objectif Comprendre et intégrer les facteurs
    clés de lutilisabilité
  • Prenez du recul
  • Sachez anticiper les coûts, les impacts
  • Faites de la Conception Centrée Utilisateur
About PowerShow.com