ERGONOMIE & GRAPHISME - Accompagnez un projet webdocumentaire 2017-2018 - Domaine de ...

ERGONOMIE
& GRAPHISME
Accompagnez un projet webdocumentaire
2017–2018

ERGONOMIE
 Généralités

Définition

Capacité à répondre efficacement aux attentes
des utilisateurs et à leur fournir un confort de navigation.

Objectifs

Trouver le juste compromis entre utilité, esthétique,
fonctionnalité et simplicité.

Objectifs

Trouver le juste compromis entre utilité, esthétique,
fonctionnalité et simplicité.

Objectifs

Trouver le juste compromis entre utilité, esthétique,
fonctionnalité et simplicité.

Objectifs

Trouver le juste compromis entre utilité, esthétique,
fonctionnalité et simplicité.

Pour une bonne ergonomie

−−Donner des repères à l’utilisateur
  pour comprendre facilement l’interface
−−Faciliter l’identification des éléments d’interaction
−−Limiter les modèles d’écran
  (Limiter les modèles d’écran, 2 max. en plus de l’accueil et intro)

−−Favoriser la lisibilité des textes
−−Proposer des contenus adaptés
−−Donner envie de consulter le webdoc

LES ÉTAPES
de la mise en œuvre

1.Faire des schémas

Sur papier, sur ordinateur...

2.Définir l’univers graphique

Palette de couleurs, icônes, illustrations, photos…

3.Tester sous Klynt

Sur une ou deux séquences

4.Ajuster, tester, tester…

... et valider !

5.Déployer l’interface

Déclinaison des séquences, insertion des contenus...

CONSEILS PRATIQUES
   pour bien démarrer

Une arborescence simple

                  Intro

                  Menu

                                          Limiter la profondeur
   Rubrique 1   Rubrique 2   Rubrique N   de l’arborescence

                                          Si besoin, utiliser un overlay
   Rubrique 1   Rubrique 2   Rubrique N   pour afficher des compléments
                                          d’information

Les écrans incontournables

INTRO : présentation du sujet et du contexte

                                               Bouton permettant
                                               de passer l’intro et
                                               d’accéder directement
                                               au menu
    PRÉVOIR UNE TRANSITION AUTOMATIQUE
    VERS LE MENU À LA FIN DE L’INTRO

Les écrans incontournables

MENU : accès aux différentes rubriques du webdoc

   LES ÉLÉMENTS CLIQUABLES DOIVENT ÊTRE FACILEMENT
   REPÉRABLES PAR LE VISITEUR

Des séquences courtes

Les visiteurs ne vont pas jusqu’à la fin d’une séquence
trop longue.

                           1
                                 DURÉE D’UNE SÉQUENCE

                                 MINUTE
                                 MAXIMUM

Favoriser la lisibilité

LES PARAMÈTRES :

−−Couleur

−−Contraste entre le texte et le fond

−−Taille du texte

−−Famille de caractères

−−Utiliser le texte à minima

Définir les styles de texte

Définir dans Klynt l’aspect des titres, sous-titres,
paragraphes...
    LIMITER À 3-4 STYLES DIFFÉRENTS

Définir les styles de boutons

Définir dans Klynt l’aspect des boutons, l’effet au survol
de la souris (rollover)

Mettre en évidence des zones cliquables

JOUER SUR :

L’opacité

La couleur de fond

L’utilisation du tooltip
(ou info-bulle)
                                          Agrandir la photo

Bouton de retour au menu

Chaque rubrique doit comporter un bouton permettant
le retour au menu.

   POSITIONNEMENT EN HAUT À GAUCHE

Bouton de retour au menu

MÉTHODE SIMPLIFIÉE
Utilisation du paramètre « watermark » en personnalisant
l’image
Projet > Paramètres de design > Watermark du projet

AVANTAGES                                        INCONVÉNIENTS
−−facile à mettre en place                       −−le bouton ne se voit pas lors de l’édition
−−positionnement identique dans toutes             dans Klynt
  les séquences                                  −−le positionnement du bouton ne peut
                                                   pas être affiné

Bouton de retour au menu

MÉTHODE AVANCÉE
Placer un élément (image, bouton) dans les calques de la
séquence avec un lien vers le menu.

AVANTAGES                              INCONVÉNIENTS
−−personnalisation illimitée           −−penser à recopier le bouton dans
−−visualisation du bouton dans Klynt     chaque séquence en s’assurant de son
−−maîtrise du positionnement             bon positionnement

LES DIFFÉRENTS
TYPES DE CONTENUS
 et leur bonne utilisation

Les textes

À utiliser à minima pour :
−− Le titrage
−− Les légendes & mentions
−− Des compléments d’information (dans une séquence
   complémentaire fixe)

Les images

À des fins d’illustration (statique ou diaporama)
    ATTENTION AU RYTHME D’AFFICHAGE ET AUX TRANSITIONS
    POUR QUE CE NE SOIT PAS DÉSAGRÉABLE VISUELLEMENT

Les sons

−− Accompagnement sonore
−− Interview
−− Commentaires
   CONTRÔLER LE NIVEAU SONORE (CONSTANT D’UNE SÉQUENCE À UNE AUTRE).
   À SOIGNER PARTICULIÈREMENT POUR LA QUALITÉ DU WEBDOC.

Les vidéos

Interviews ou pour donner à voir.

    À UTILISER AVEC MODÉRATION !
    Suppose une compétence de l’enseignant en la matière
    ou un accompagnement par un partenaire ou Canopé afin d’impliquer
    les élèves dans le tournage des vidéos.

Les animations

À des fins pédagogiques, artistiques ou choix délibéré du
scénario

Quelques outils

−− Tutoriels Klynt & webinars
  klynt.net/fr/tutoriels
  klynt.net/fr/decouvrez-les-webinars-klynt

−− Palette de couleurs
  color.adobe.com/fr/explore

−− Icônes, pictogrammes
  iconfinder.com
  iconmonstr.com
  thenounproject.com