Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
[email protected] SRC: Bureau H103CReSTIC: Bureau C203
Écriture pour les médias numériquesM1105P
Support disponible : www.davidannebicque.fr/cours/ECR130
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Objectifs du module
Objectifs : Analyser et concevoir une interface (navigation, ergonomie, accessibilité).
Savoir appliquer les fondements de l’ergonomie web et repérer les défauts d’utilisabilité d’une interface.
2
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Organisation
3 TD
7 TD avec M. Grosdoit‐Artur
3 TP M. Grosdoit‐Artur
Évaluations pour ma partie Dossier à rendre Évaluation
Cours en « duo » avec M. Grosdoit‐Artur
L’ensemble des supports sont disponibles: Bureau virtuel – M1105P www.davidannebicque.fr
3
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Commençons immédiatement un regard critique
http://www.univ‐reims.fr
http://www.cdiscount.com
http://www.ldlc.com
http://www.laredoute.fr/
http://www.laposte.fr/particulier
4
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Quelques références intéressantes
5
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Définition de l’ergonomie
L’ergonomie pour satisfaire un besoin
L’interaction avec le système est essentielle Site internet Site intranet Application mobile (jeux vidéo, logiciel, …)
L’interaction conditionne l’efficacité et donc la qualité « d’expérience utilisateur »
Chaque utilisateur à ses critères pour définir son « expérience utilisateur »
On trouvera beaucoup le terme « UX‐ » (User eXperiment) et tout particulièrement le UX‐Design
6
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Définition de l’ergonomie
L’interface occupe une part non négligeable du code développé En moyenne 48 % Et jusqu’à 80 % parfois Elle occupe généralement 1/3 des réunions de conception Elle est l’unique préoccupation de votre client
L’échec d’une conception d’interface peut coûter entre 50 et 70% du coût global de votre projet
En revanche bien pensée, et au bon moment elle ne coutera qu’environ 10 % du projet
7
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Définition de l’ergonomie
L’enjeu particulier du web Hétérogénéité des utilisateurs Inexpérience des nouvelles technologies encore grande « sentiment de peur » du web
L’internaute est votre client L’accès à la concurrence est simplifiée… Une bonne interface/ergonomie sera donc un atout
Exemple: IBM Site version 1998, la première fonction est la zone de recherche, la seconde est l’aide... Car la recherche ne fonctionne pas
Refonte du site, augmentation de 120 % du trafic du site le premier mois, 400% d’augmentation des ventes
8
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Définition de l’ergonomie
Concevoir pour les utilisateurs Définir le processus de fonctionnement du site
Définir le plan, la hiérarchie des informations et le contenu éditorial. Impliquer les futurs rédacteurs
Connaître son public Cibler les futurs visiteurs (personnas) et son public cible
Favoriser le recueil de retour d’expérience Permettre aux utilisateurs de donner leur avis sur votre site
Répondre aux utilisateurs Connaître l’avis des visiteurs est inutile si vous ne leur apportez pas un retour (modification du site, réponse directe,…)
Analyser et interpréter les statistiques de votre site Fera l’objet d’un module
Gérer les erreurs éventuelles Messages d’erreurs pertinents, proposition de solutions, …
Mise à jour régulière du site et vérification des « liens morts »
9
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Organiser l’information
10
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Identifier le contenu
Adopter un mode de conception « centré sur l’utilisateur » C’est‐à‐dire en se préoccupant des besoins de vos visiteurs et non des possibilités techniques
Nécessité de bien identifier quel est le profil du public cible, ses attentes, ses moyens d’accès aux contenus
11
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Identifier le contenu
Cibler les attentes des utilisateurs Identifier le profil
Tranche d’âge Catégorie socio‐professionnelle Expérience de l’information e de l’internet Conditions environnementales Matériel utilisé (configuration PC, terminal mobile, …)
Organiser des rencontres En tête à tête
Interview
En groupe Focus group
Recueillir les besoins et attentes Recueillir les critiques sur les sites concurrents
12
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Architecture de l’information
Passer une commande
Trouver les articles
Chercher un article
Filtrer une liste d’article
Consulter le catalogue
Valider le panier
Visualiser le panier
Modifier le panier
Confirmer le panier
Saisir les informations
Saisir
Valider
Confirmer et payer
13
Donnera plutôt des pages
Correspondra plutôt à des fonctionnalités
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Architecture de l’information
Ce type d’analyse permet de visualiser les pages et les fonctionnalités à proposer ainsi que leur organisation
Chaque page devra contenir toutes les informations nécessaires au bon fonctionnement de la tâche
Penser à organiser l’interface et les pages du plus général vers le plus particulier
L’ordre des éléments doit être cohérent avec l’ordre dans lequel votre visiteur doit interagir avec eux
14
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Architecture de l’information
Organiser selon le contenu S’appuyer sur le contenu qui sera présent sur le site web généralement utile pour établir l’arborescence
Arborescence Favoriser plutôt la largeur que la profondeur d’un menu ou d’une arborescence
Préférer ajouter un menu supplémentaire plutôt qu’un niveau de sous‐menu
Profondeur : 3 niveaux max Largeur : 7‐8 rubriques (notion de canal limité) Cohérence : éviter les menus avec des sous‐menus et d’autres sans Unicité: éviter les menus qui pointent vers un lien déjà référencé dans un autre menu
15
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
Organiser l’espace Positionnement cohérent ‐> utilisation de gabarit !! Utiliser le même gabarit sur l’ensemble du site
Augmente la confiance dans votre site et votre entreprise
16
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
17
Sens de lecture d’une page web (interface)
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
Lecture en Z Toujours lors des premières visites Des éléments peuvent « perturber » ce sens de lecture naturel
Les photos avec des éléments vivants (humains, animaux) Des éléments trop proches ou trop éloignés
Analyse sur un site web Pour permettre de bien positionner les éléments que vous voulez mettre en valeur
18
Source: « ergonomie des interfaces »
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
Accessibilités des éléments Avec la souris
19
Source: « ergonomie des interfaces »
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
Sur des terminaux mobiles et tactiles
20
Source: « ergonomie des interfaces »
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
Zones de manipulation Ce sont les zones où les interactions seront les plus faciles
Regrouper les informations autant que possible
21
++ + ‐ ++
+
‐
Menu horizontal
Menu vertical
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Agencer pour interagir
Tenir compte de la dimension des écrans
Mais attention aux terminaux mobiles…
22
2009 2010 2011 2013
supérieure 57 % 76 % 85,1 % 92,9 %
1024*768 36 % 20 % 13,8 % 7 %
800*600 4 % 1 % 0,6 % 0,1%
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
La page d’accueil
C’est la page essentielle de votre site, d’elle dépend le reste de la visite
Vous pouvez perdre tous les visiteurs sur cette page et en moyenne environ 35% des personnes quitte un site dés la page d’accueil
La page d’accueil doit être la vitrine en présentant le contenu du site, qui vous êtes et donner envie d’aller plus loin
Trois éléments indispensables Identité du site (marque, logo, visuel) Informations utiles (qui êtes vous, que proposez vous,…) Les fondements de la navigation (où se trouve le menu, où se trouve le fil d’Ariane, …)
23
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
La page d’accueil
Votre page d’accueil doit répondre aux questions des visiteurs suivantes
Qu’est ce que c’est ? Que puis je faire ici ? Qu’est ce qu’ils ont mis ici ? Pourquoi dois je être là ?
24
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
La page d’accueil
Check‐list d’une bonne page d’accueil Quels services rend le site ? Que peut il offrir à l’utilisateur Comment fonctionne le site Pourquoi ce site Quel est son objectif ? Que contient il ? A qui s’adresse t’il ? Qui est le responsable ? Qui puis je contacter ?
25
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
La page d’accueil
Vous devez enfin Présenter les moyens de navigation qui seront cohérent sur l’ensemble du site
Bannir les écrans tunnels ou les écrans ‘introduction Optimiser le poids de cette page pour réduire son temps de chargement
26
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
La navigation
27
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Objectifs
Guider l’utilisateur pour faciliter la navigation dans votre site. La cohérence des menus Les intitulés doivent être comme des panneaux directionnels Le chemin doit être court Éviter de proposer beaucoup de choix (7, canal limité) Toujours informer l’utilisateur d’où il vient, où il est, et où il peut aller
28
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Objectifs
Indiquer où est l’utilisateur Mise en valeur de l’item du menu correspondant à la page courante
Mettre un titre cohérent avec le libellé du lien cliqué pour lui préciser le cheminement pris
29
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Objectifs
Indiquer par où est passé l’utilisateur Fil d’Ariane
Le fil d’Ariane est un élément incontournable qui améliore la navigation. Il montre aux utilisateurs le chemin parcouru depuis la "Page d'accueil" et leur permet de se repérer dans le site.
Présent sur toutes les pages d'un site Internet, le fil d'Ariane apporte une dimension ergonomique à un site.
Le fil d'Ariane est donc comme son nom l'indique, un fil conducteur qui nous montre le chemin parcouru dans le site depuis la page d'accueil. Il est possible de revenir sur les pages précédentes en cliquant sur les différentes pages présentes dans le fil d'Ariane
30
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Objectifs
Fournir une vue globale du site Barre de navigation détaillée (mais pas trop)
illustrer
31
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Objectifs
Cohérence du système de navigation Même libellé entre le menu, le fil d’Ariane et le titre de la page
Ordre des rubriques Placer les rubriques les plus utilisées/vues dans le haut du menu vertical ou sur la gauche d’un menu horizontal
Tenir compte des utilisateurs perdus ou expérimentés Proposer un moteur de recherche et un plan du site
Réduire au maximum les interactions avec le navigateur Pour éviter les rafraichissements (F5) Pour éviter l’utilisation du bouton « précédent » surtout sur les formulaires
Très important, beaucoup de bug…
32
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Concevoir le système de navigation
La barre de navigation doit apparaître sur toutes les pages Au même endroit Avec les mêmes items
Dans le même ordre
Privilégier le haut à gauche pour son emplacement
Bannir les barres de navigations variables Un item ne doit jamais disparaître
Éventuellement « griser » un item inaccessible
33
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Concevoir le système de navigation
34
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Concevoir le système de navigation
Navigation contextuelle Dépend du contexte De la partie du site sur laquelle on est Le contenu peut changer d’une page à l’autre,
mais son positionnement doit toujours rester le même
35
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Concevoir le système de navigation
36
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Trois règles de bonne conception pour vos menus Être signifiant : à la lecture de son intitulé, le visiteur doit savoir ce qu'il va trouver comme contenu sous le menu.
Être complémentaire : tout le contenu de votre site doit être associé à un menu. Il ne doit pas exister de contenu appartenant à aucune rubrique.
Être exclusifs : il ne doit pas y avoir ambiguïté dans les items de vos menus. Ainsi un internaute ne doit pas hésiter entre plusieurs items de votre menu pour accéder à ce qu'il est venu chercher.
Concevoir le système de navigation
37
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Convention La notion de convention est très vague et vaste, tout en étant simple à comprendre.
Une convention c'est ce qui est fait par la majorité des autres sites web ! Ainsi la barre de navigation en haut, plutôt qu'en bas est une convention. Les conventions passent aussi bien par la mise en page, que par les termes utilisés (par exemple on utilise toujours "rechercher" et pas "trouver" pour une zone de recherche,...).
Cet aspect de positionnement des différents éléments d'interaction et de navigation entre dans ce que l'on nomme couramment convention de localisation.
Us et coutumes du web
38
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Us et coutumes du web
Navigation web Exemples de convention de localisation
Cette liste, non exhaustive, est issue de nombreuses navigations. Elle dresse un ensemble de convention (de constats) sur ce qui se fait ailleurs et qui semble donc être des conventions :
Le logo toujours en haut et souvent à gauche,
Le menu de navigation principal souvent en haut sous le logo,
La zone de recherche en haut du site également,
L'espace de connexion, assez souvent à droite d logo ou au dessus de celui ci, mais à droite,
Le menu secondaire plutôt à gauche en vertical,
Les mentions légales en bas de page,
Le contenu au centre,
39
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Évidemment cette notion de convention s'applique pour chaque élément de votre site (navigation, vocabulaire, interactions, localisation,...).
A chaque fois vous devez vous demander comment c'est fait ailleurs. Alors, bien sûr vous pouvez apporter un peu d'innovation, mais celle‐cidoit être modérée, en fonction du contenu de votre siteWeb.
Il semble par exemple difficile aujourd'hui de totalement révolutionner laconception d'un site e‐commerce qui respectent tous des conventionssimilaires.
La liberté est un peu plus grande pour des pages d'artiste ou des sitespublicitaires.
Us et coutumes du web
40
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Navigation par étapes
Cas typique du « check‐out » Pour une tâche spécifique ou une tâche pouvant être interrompue ou encore pouvant impliquer des retour en arrière
L’ordre des étapes doit être logique et en cohérence avec la tâche de l’utilisateur
Exemple Choix des options de cadeaux Choix du mode d’expédition Adresse de livraison Adresse de facturation si différente Paiement
Les mêmes règles que pour un menu s’appliquent Indiquer où est l’utilisateur dans le processus, Ce qu’il vient de faire Ce qu’il doit encore faire
41
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Navigation par étapes
42
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Navigation par étapes
Le nombre d’étape ne doit pas excéder 6
Ce mode de fonctionnement doit permettre une validation des données saisies (page récapitulative)
Ne jamais laisser aucune ambiguïté sur le prix réellement payé risque de perte de client
Garantir la sécurisation du moyen de paiement Pictogrammes, https Cadenas, …
Terminer par une confirmation et un dernier récapitulatif
43
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Naviguer autrement
La recherche
Le plan du site
44
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Fil d’Ariane Lors de la mise en place du fil d'Ariane, mieux vaut respecter ces quelques conventions.
Placer le fil d'Ariane en haut de page de préférence à gauche au dessus de la page courante. De cette façon il ne gène pas le contenu et reste facilement accessible.
Utiliser le symbole « > » entre chaque rubrique. Ce signe s'est standardisé. Choisir un autre signe demandera des efforts supplémentaires de compréhension à l'internaute.
Utiliser un petit corps de police. Le fil d'Ariane doit rester lisible sans gêner la lecture de la page.
Indiquer le titre de la page courante dans le fil d'Ariane. Pour que l'utilisateur ait un bon point de repère, le titre de la page doit être présent et dans le fil d'Ariane et sur la page. Cette redondance permet à l'internaute de bien se repérer.
Utiliser dans le fil d'Ariane les mêmes dénominations que les pages parcourues.
Les éléments de navigation
45
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
46
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation Onglets
47
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Menus déroulants éviter les sous‐menus
48
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Le méga‐menu
49
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Les boutons/pictogrammes Attention au sens et à leur compréhension ! Si vous souhaitez absolument utiliser des symboles pour votre site (et par exemple pour des formulaires), ceux‐ci doivent aussi répondre à un ensemble de règles :
Être facilement compréhensible (une corbeille pour supprimer, une imprimante pour imprimer...).
Respecter les conventions (notamment du logiciel classique). Être, toujours, accompagné d'un texte, ou à défaut d'un "title" pour avoir une information au survol.
Être accessible en cas de non affichage des images (balise « alt »). Être significatif de l'action qu'il va engendrer.
50
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Exemple
Sur le site de Rowenta, la barre de navigation se résume à un ensemble de symboles. Même s'ils tendent à être compréhensible, car assez courant dans l'univers du Web, leur compréhension n'est pas intuitif. (Source : www.rowenta.fr)
Les éléments de navigation
51
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Les liens Le positionnement de "clic logique"
Le seul moyen de naviguer (pour le moment) sur le net c'est de « cliquer » ! Par habitude et utilisation, les internautes ont appris à repérer ce qui est
"cliquable" de ce qui ne l'est pas, et par conséquent, ils savent ce qui devraient être cliquable en arrivant sur un nouveau site.
Les exemples sont nombreux.
Il n'est pas rare de voir un supposé lien accompagné d'un icône. Instinctivement le visiteur va cliquer sur le lien textuel, car c'est lui qui est explicite. Mais dans la conception le lien ne mènera nulle part, c'est l'icône qui est cliquable. Erreur ! Les deux doivent l'être ainsi libre à l'internaute de choisir. Ne pas rendre ce texte cliquable peut faire perdre de nombreux visiteurs.
52
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Exemple Une fois de plus, le site Rowenta montre ce qu'il ne faut pas faire. La barre de navigation, complémentaire à cet ensemble de symbole, se trouve en bas, presque en pied de page, et dans des contrastes de couleur, et une taille, qui la rende très (trop ?) discrète. Il y a fort à parier que beaucoup de visiteurs passent plusieurs secondes à la trouver. (Source :www.rowenta.fr)
53
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Sur le site Carglass, le texte nous explique la démarche à suivre pour prendre rendez vous en cas de bris de glace. Il faut "prendre un rendez vous en ligne dés maintenant". On ne peut pas cliquer sur ce texte, qui pourtant nous y incite. Il faut chercher dans les menus où on peut prendre un rendez vous. Vous noterez que d'autres liens dans le texte sont pourtant cliquable... (Source : www.carglass.fr)
54
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur un blog du site d'information www.20minutes.fr, un texte nous indique que l'on peut contacter l'auteur et on nous précise son adresse mail, le réflexe et les habitudes prises sont de vouloir cliquer sur cette adresse pour lui écrire. Ce n'est pas possible !
Les éléments de navigation
55
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
L'utilisation des affordances Une affordance est la capacité d'un objet à suggérer une action !
Dans le Web c'est donc la capacité d'un élément de votre site (texte, bouton, ...) à suggérer un clic et à conduire vers une direction précise ou un élément de formulaire à suggérer la saisie d'un type d'information.
Si on s'intéresse aux liens. Le choix d'une couleur de lien peut indiquer à votre internaute que celui‐ci n'est pas cliquable.
Par exemple : Un lien ou un bouton qui serait gris clair, indiquerait, inconsciemment, qu'il est inactif (en se référant aux pratiques courantes du logiciel par exemple).
A l'inverse, des éléments peuvent être mis en valeur de manière à suggérer un clic, alors que ce n'est pas le cas.
Les éléments de navigation
56
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Le site de l'Union propose une barre à droite avec un ensemble d'information. Les titres des sections ont une forme proche d'un bouton, et incite au clic pour accéder à toute la rubrique. Mais ce n'est pas le cas... Pas sur tous les boutons en plus. (Source : www.lunion.presse.fr)
57
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments de navigation
Sur ce site, une roue suggère la navigation, en soit cela peut être une bonne idée. Mais les éléments de la roue ne sont pas cliquable. Ils mènent vers l'affichage d'une description de la catégorie. Soit ! Mais dans cette catégorie, le titre "Jean Marie Farina", écrit en gros, semble indiquer un clic pour accéder à la rubrique. Non plus ! Il faut cliquer en dessous sur "découvrir" ou "explorer". Ce problème rejoins d'ailleurs la remarque précédente. (Source : www.roger‐gallet.fr)
58
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Créer et favoriser l’interaction
59
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
L’interaction est le fait que l’utilisateur utilise une interface (d’un site web, d’un logiciel, …) pour obtenir une réponse, résoudre un problème ou encore prendre une décision.
L’interaction c’est donc l’ensemble des moyens mis à disposition par une interface pour permettre aux utilisateurs et au système d’échanger des informations
60
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
Il existe (dans le monde du logiciel/web) deux façons principales d’interagir
La saisie des données qui se fera généralement via un clavier La manipulation des informations affichées qui se fera via la souris (ou le doigt dans le cas d’une interface tactile)
61
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
La clavier C’est le moyen le plus fiable pour saisir des informations L’utilisation est parfois contraignante surtout pour les novices
Il faut donc optimiser les formulaires de saisie Proposer des alternatives (listes, autocomplétion, correction automatique, …)
Les raccourcis claviers pour les experts Ce qui s’avérera beaucoup plus rapide et effiace que la manipulation de la souris pour des utilisateurs expérimentés
Nécessite une apprentissage des raccourcis existant sur une interface Mais certains sont devenus usuels (CTRL+C, CTRL+V, CTRL+N,…) et ils doivent toujours produire le même effet
Indiquer les raccourcis présents dans votre interface (infobulle par exemple)
62
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
Quelques mots sur la commande vocale Elle n’a pour le moment pas d’avenir dans la saisie de formulaire
Trop contraignante à cause de l’environnement (perturbations, bruits) Impose un phrasé particulier L’utilisation de mots clés Finalement absolument pas le langage naturel
63
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
Manipulation directe (la souris ou autre système de pointage) Utilisation naturelle: l’utilisateur appuie (clic) sur ce qu’il souhaite faire (bouton, icone, …)
Peut nécessité une certaine dextérité et une précision pour la manipulation
Attention donc au public cible
Est très adaptée aux utilisateurs occasionnels Les utilisateurs experts y ont assez peut recours (ligne de commande, raccourcis claviers,…)
Cette solution impose un certain nombre de règle L’objet doit accompagner la manipulation
Un icône doit rester visible pendant son déplacement par exemple
64
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
Cas particulier de la souris Le rôle des boutons doit être constant Éviter le déclenchement d’actions très importantes ou irréversible sur un simple clic (ou sans confirmation)
Attention à la différence simple‐clic / double‐clic entre le web et le logiciel
Le rollover pour apporter des compléments d’informations Pour indiquer où se trouve le pointeur de la souris
65
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interagir avec l’interface
Cas du tactile Adapter l’interface à une manipulation au doigt
Boutons plus grands par exemple
Utiliser les gestes en fonction de leur standard Appui court => sélection Appui long => action contextuelle Déplacement de deux doigts => rotation Étirement de deux doigts => zoom …
Toujours demander confirmation sur une action importante ou irréversible
66
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments d’interaction
On en a déjà vu Les menus notamment pour la navigation Les onglets, les liens, …
Il existe aussi Les boutons, Les éléments de sélection Les champs de saisie
67
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments d’interaction
Les boutons Nécessaire pour exécuter une commande/action Toujours visible, pour une accessibilité immédiate Quelques règles de conception
Son intitulé doit être visible et explicite Respecter les us et coutumes (libellés, positions, …) Donner le focus à l’action évidente Toute action devrait pouvoir être annulable Désactiver un boutons inactif, ne surtout pas l’effacer !
Favoriser les boutons sur une interface tactile
68
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments d’interaction
Les éléments de sélection Afin de faciliter la saisie on propose de choisir dans un ensemble de données
Boutons radio Case à cocher (ou checkbox) Liste déroulante
69
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments d’interaction
Case à cocher / boutons radios De préférence pour les choix fréquents et peu nombreux A préférer aux listes déroulantes (surtout sur tactile)
Liste déroulante Pour des ensembles longs (beaucoup de valeurs) De préférence pour des choix peu fréquents Pour un ensemble de choix variable Préférer le classement alphabétique des items ou éventuellement par ordre de préférence utilisateur
70
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur ce site, on vous offre 3 produits d'essais. Pour montrer le fait que vous pouvez en choisir 3, des "checkbox" sont utilisés. Autre intérêt ergonomique, une phrase effectue le décompte pour vous indiquez combien vous devez encore choisir de produit. (Source : www.clarins.fr)
Les éléments d’interaction
71
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments d’interaction
Le site de vêtement en ligne la Redoute, propose des articles dans différents coloris et différentes tailles. Pour que le client puisse choisir sans faire d'erreur, une liste déroulante est proposée. (Source : www.laredoute.fr)
72
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les éléments d’interaction
Sur le site de la redoute, les articles sont souvent proposés en plusieurs coloris. Un menu déroulant permet de choisir la couleur désirée (un plus au niveau de l'interaction). Une fois la couleur choisi, l'article s'affiche automatiquement dans la bonne couleur. L'utilisateur visualise ainsi automatiquement le produit qu'il va acheter. (Source :www.laredoute.fr)
73
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les champs de saisie
Les champs de saisie Quelques mots sur les formulaires
Par définition ils font peur ! Car l’utilisateur va devoir se dévoiler, faire des choix, apport des informations
L’utilisateur perçoit un enjeu crucial dans le « bon » remplissage du formulaire
Qui validera une commande par exemple
La marge d’erreur est faible et la correction des erreurs peut s’avérer fastidieuse quand elle n’est pas impossible
Vous devez donc Essayer de proposer par défaut la valeur la plus courante
Guider au maximum l’utilisateur (information sur le format, …)
Limiter la saisie au strict nécessaire
Ne demandez pas des infos dont vous ne feriez jamais rien
Ne jamais imposer une identification…
Même si cela est plus que monnaie courante, cela ne devrait pas être une règle !
On estime à 20% la perte de visiteur sur cette étape
74
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les champs de saisie
Champs de saisie
75
Exemple de formulaire de connexion parfaitement mis en valeur. Le champ dans lequel on se trouve prend une bordure bleue, et affiche le curseur. (Source : www.blogger.com)
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les champs de saisie
Champs de saisie Choisir des libellés aussi court que possible Donner une longueur appropriée à un champs Prévenir des erreurs de saisie Expliciter la nature de l’erreur
76
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur ce site, le formulaire d'inscription utilise des légendes sur chaque champ pour préciser ce qui est attendu de l'utilisateur. Noter qu'une précision est faite en plus sur l'adresse e‐mail. Cette information est mise en valeur par un style particulier. (Source :www.bedetheque.com)
Les champs de saisie
77
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Ce même site permet la gestion en ligne d'une collection de BD. Il est donc possible d'ajouter des albums. Le formulaire proposé est conséquent, mais très bien pensé et très ergonomique. Les champs étant nombreux, les libellés sont cours afin de garder une mise en page cohérente. Mais pour compenser ce manque de clarté potentiel des libellés, des informations très complètes sont apportées. Quand l'utilisateur survole un champ, ou entre dans un champ une zone (toujours au même endroit) lui précise toutes les informations nécessaires afin d'éviter une erreur. Cette solution évite de plus de surcharger l'utilisateur avec énormément d'information sous chacun des champs. et garde une cohérence en apportant une information toujours au même endroit (respects des règles précédentes). (Source : www.bedetheque.com)
Les champs de saisie
78
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les champs de saisie
Autre exemple sur le site Blogger, une erreur ou un oubli est signalé par un texte en rouge sous le champ en erreur. La bordure de ce champ passe aussi en rouge pour le mettre un peu plus en valeur. (Source : www.blogger.com)
79
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur le site d'amazon, les erreurs apparaissent de manière centralisée, dans une mise en forme particulière. Il faut ensuite retrouver le champ en erreur. Cette solution est valable ici, avec juste deux champs. Elle est plus discutable sur un formulaire plus long. (Source : www.amazon.fr)
Les champs de saisie
80
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Précisez les champs obligatoires Une règle, qui semble évidente a priori, mais qui peut être facilement oubliée. Dans un formulaire, il est indispensable de toujours mettre en évidence les champs obligatoires. Différentes solutions existent :
Un libellé en gras, un astérisque (*) une couleur rouge, un icône,...
Même si tous les champs sont obligatoires, il semble préférable d'adopter une mise en forme particulière, plutôt qu'une simple phrase indiquant que les champs sont obligatoires.
Les champs de saisie
81
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Validation "à la volée" Une autre solution, notamment pour les zones de texte, consiste à valider ce que le visiteur saisie au fur et à mesure. Là encore il faut le faire au bon moment.
La validation doit se faire quand l'internaute considère avoir fini de remplir un champ, c'est à dire quand il passe au suivant.
Cette solution est intéressante pour valider une adresse e‐mail en testant la présence d'un nom de domaine, d'un signe @, de l'absence de caractères interdit,...
Pour vérifier également la disponibilité d'un pseudo (grâce notamment à l'Ajax), ou encore vérifier que deux champs de mot de passe sont identiques, ou encore que le niveau de sécurité est suffisant....
Les champs de saisie
82
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
L'adresse e‐mail saisie est incorrecte (pas au bon format). Le site nous en informe. Il est impossible de valider le formulaire tant que l'erreur n'est pas corrigée. Notez que selon que l'on soit déjà client ou pas, les informations ne sont pas les mêmes. Si on sélectionne "nouveau client", un formulaire complet va s'afficher. (Source :www.ldlc.com)
Les champs de saisie
83
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Toujours sur le même site, un autre exemple de validation à la volée. L'information sur la sécurité du mot de passe se fait en temps réel, c'est à dire à chaque nouveau caractère saisie, alors que la comparaison des deux mots de passe ne se fait qu'après avoir quitté le champ (sur la perte de focus). (Source : www.ldlc.com)
Les champs de saisie
84
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Les messages doivent, évidemment être courtois et adaptés à votre public.
Ils doivent être clair et précis. Ils doivent permettre à votre internaute de comprendre son erreur et de la corriger efficacement. Il peut être intéressant de différencier un champ laissé vide d'un champ mal remplie et apporter une aide et une explication en conséquence,... Il y a de nombreuses façons d'aider le visiteur.
Validation coté serveur aussi ! En dernier recours, penser toujours à valider les informations avant de les manipuler, notamment pour la saisie dans une base de données. Cela évitera également des erreurs, que vous n'auriez pas détectées au sein des formulaires.
Les champs de saisie
85
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Évitez le bouton "effacer" Éviter autant que possible ce bouton sur vos formulaires. Il est très dangereux, surtout s'il est mal utilisé, comme dans les cas suivants :
Il est situé à droite de l'écran (ce qui correspond à l'affordance "valider") Il est à coté du bouton validation (risque de confusion) Il est de même style que le bouton valider (risque de confusion) Il est à la fin du formulaire (là où on attend le bouton valider) Il efface un formulaire de taille conséquente (et donc risque de décourager votre internaute s'il doit recommencer)
Efface sans même demander une confirmation
Les champs de saisie
86
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur le site LDLC, le fait de modifier la quantité d'un produit recalcule automatique le montant total de la commande, et modifie même éventuellement le prix des frais de port. Notez plusieurs idées très intéressantes sur ce site. Tout d'abord la modification de quantité passe par deux boutons "+" et "‐", ce qui évite toutes erreurs de saisie (et permet aussi d'indiquer une modification de quantité). Et le recalcule automatique du montant passe la page quelques instant en grisé. (Source : www.ldlc.com)
Interactions et formulaires
87
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur le site Amazon, la modification d'une quantité d'un produit (qui se fait en saisissant un nouveau nombre dans une zone de texte, ce qui peut entraîner des erreurs de saisies) nécessite de cliquer sur le bouton "mettre à jour" pour obtenir le nouveau total. Notez que ce bouton est d'ailleurs assez peu visible dans la page. (Source : www.amazon.fr)
Interactions et formulaires
88
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Minimiser l’attente et éviter l’inutile
89
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Informer de l’attente
Si l’utilisateur sait qu’il va devoir attendre alors il attend… Il faut donc l’informer d’un temps de réponse plus long que normal, d’un temps de chargement important, …
Au delà d’une seconde sans changement sur la page après une action de l’utilisateur, celui‐ci pensera que l’action n’a pas fonctionnée
Toujours changer les objets pour confirmer la prise en compte d’une action
90
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Indiquer l’état d’avancement
Pour des temps supérieurs à 6 secondes, il est recommandé de mettre en place une barre de chargement (ou progresse bar) informant l’utilisateur de l’état d’avancement
L’utilisateur doit pouvoir annuler une action trop longue
91
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Éviter les actions inutiles Dans tous les cas, il faut bannir les actions inutiles. Ainsi, si vous pouvez répondre à la place d'un internaute, vous devez le faire ! Par exemple si un client ajoute à son panier un produit, vous savez qu'il en souhaite au moins un, inutile de lui demander la quantité désirée.
Éviter l’inutile
92
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Éviter les actions inutiles Dans la même idée, ne demandez jamais deux fois la même chose à votre internaute. Quoi de plus énervant que de devoir saisir deux fois son adresse par exemple. Pré‐remplissez les formulaires si vous avez déjà demandé les informations par exemple... Éviter d'effacer un formulaire que votre visiteur aurait commencé à remplir, quand il fait une action (ajouter un moyen de paiement par exemple, revenir choisir un autre produit, ...). Il existe des moyens simples (cookie, Session) de sauvegarder temporairement les informations pendant la visite sur votre site.
Éviter l’inutile
93
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Cdiscount propose des produits supplémentaires quand vous ajoutez un produit à votre panier. Cela passe par deux "box" en premier plan, et il faut valider les deux avant de poursuivre. Cette action est longue, l'interactivité n'est pas optimisée. (Source :www.cdiscount.com)
Éviter l’inutile
94
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Éviter l’inutile
Proposez des modes efficients et intelligents à vos visiteurs récurrent. Sur le site Amazon, vous avez une fonctionnalité appelée "1‐Click" qui vous permet de commander en 1 clic, le produit. Le client a auparavant configuré, son adresse et son moyen de paiement, il ne doit donc plus refaire tout le processus de commande. Cette option est efficace pour les utilisateurs récurrents. (Source :www.amazon.com)
95
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Qualité de réseau et informations Tous les internautes ne sont pas égaux sur le débit de connexion :
celui‐ci varie encore de 56Kbits (si si !) à plus de 100Mbits... la différence est simplement ahurissante...
Cela influencera forcement la manière de naviguer de votre internaute. A l'heure de la vidéo, des animations flashs,... certains de vos internautes n'ouvriront même pas votre site, car simplement non téléchargeable sur leur navigateur.
Cependant quelques téméraires pourraient s'y aventurer s'ils ont connaissance de combien de temps cela va prendre.
Et cette notion d'information sur le temps nécessaire, le temps d'attente est valable quelque soit le débit de connexion.
Toujours prévenir
96
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Exemple Ainsi une vidéo qui se charge, vous devez informer l'internaute du temps restant,
Une image à afficher en grand format, vous devez informer votre internaute de son poids, du temps nécessaire, de la taille,...
Une animation flash, un applet Java, ... à chaque fois ne laissez pas votre visiteur dans le doute.
« Mon site est planté ou ca charge quelque chose ?" Informez le !
Toujours prévenir
97
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Interactions et informations Enfin, informez toujours votre internaute quand une interaction va exécuter une action qui « sort de l'ordinaire ».
Informez le qu'il va télécharger quelque chose (et préciser son extension, sa taille, le délai...) ;
Informez le qu'il va ouvrir une nouvelle page, et informez le avant qu'il ne clique.
Laissez ajouter un produit dans le panier, remplir le formulaire, et informer que le produit n'est pas disponible n'est pas une bonne idée, et risque de faire fuir votre visiteur. Sans compter que cette action sera à la limite de la légalité.
…
Toujours prévenir
98
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Organiser
99
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Chaque contexte implique des contenus différents Outre l'aspect page navigante/page de contenu, le contexte de votre siteimplique des informations nécessaires voire obligatoires, mais netombez pas dans l'ajout d'informations superflues.
Ainsi la date ou l'heure sont des informations parfaitement inutile sur unsite personnel, ou un site d'e‐commerce, par contre la date sur un sited'information est pertinente pour dater l'actualité affichée.
Et il existe de nombreux exemples, la météo sur un site de cinéman'apporte rien à votre visiteur. Vous devez donc vous demander si unélément, un mot, une phrase apporte une plus‐value pour votre visiteuret par rapport au contexte de votre site web.
Organiser
100
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
L'organisation visuelle s'applique aussi aux interactions et aux menus Cette notion est essentielle lorsque vous proposez un site interactif etqui demande des actions de la part de l'internaute (un formulaire parexemple). Notamment il est recommandé de ne pas proposer toutes lesoptions directement au visiteur, mais de les proposer uniquement enfonction de ses choix.
Ceci est d'autant plus vrai à l'heure duWeb 2.0 "dynamique".
Organiser
101
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Organiser
Voici un exemple où toutes les informations sont présentées. L'utilisateur va se sentir obligé de remplir toutes les informations des deux blocs (principe d'affordance une nouvelle fois). Le second bloc ne devrait s'afficher que si l'utilisateur souhaite indiquer une autre adresse de facturation. On constate également dans cette exemple que pour palier à cette "erreur" d'interface, il y a un bouton "adresse identique" qui effectuera la recopie automatiquement.
102
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Organiser
Ce deuxième exemple montre "une" bonne pratique. L'utilisateur peut choisir une autre adresse de livraison. Mais les champs sont masqués par défaut. L'utilisateur doit d'abord préciser son souhait de se faire livrer à une autre adresse pour pouvoir ensuite saisir les nouvelles informations. Cette méthode réduit considérablement les informations sur la page de formulaire et rend ce dernier beaucoup plus lisible.
103
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Précédent‐suivant‐dernière‐première,... Autre exemple courant de surcharge d'information : les navigations dansles pages et notamment dans une longue liste (résultat de recherche parexemple, ou listing d'article). Il est fréquent (voire indispensable !) devoir en bas de page (et parfois en haut) une pagination avec selon les casprécèdent‐suivant...
Par gain de temps cette pagination est souvent identique sur toutes lespages et on se retrouve avec un "page suivante" sur la dernière page.
Dans le meilleur des cas ce lien est inactif sur la dernière page (parfoisnon et c'est une erreur de conception grave qui entraînera le plantage dusite et une erreur 404 à coup sûr).
Proposer un lien inactif est à la fois une incohérence et une surchargeinutile pour l'utilisateur, autant "effacer" ce lien sur cette page.
Organiser
104
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur le célèbre site Amazon, le lien "précédent" (ou "suivant") est présent même sur la première page, mais rendu inactif ! (Source : www.amazon.fr)
Organiser
105
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur le non moins célèbre site Google, le lien précédent n'est visible qu'à partir de la deuxième page, ce qui est tout à fait cohérent. (Source : www.google.fr)
Organiser
106
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Plus d'information sur la pagination. Excellent site sur la pagination et les bonnes pratiques. A lire nécessairement !!!
http://www.smashingmagazine.com/2007/11/16/pagination‐gallery‐examples‐and‐good‐practices/
Organiser
107
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Règle générale : N'afficher que des éléments d'interaction pertinents Plus généralement, il convient de n'afficher que des éléments d'interaction pertinents et nécessaires à la navigation dans votre site Web. Un autre exemple, toujours concernant la navigation, si votre pagination comporte 50 pages, inutile d'afficher 50 liens pour naviguer, mais choisir une solution par "paquet".
Autre exemple, si un produit n'est plus disponible, il semble pertinent de ne pas proposer le lien "acheter" ou "ajouter au panier"... Il existe un ensemble d'exemple similaire. Il faut, pour chaque élément d'interaction, se demander s'il est pertinent dans le contexte.
Organiser
108
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Notion de charge visuelle réelle et perçue Un ensemble d'artifice mis en place sur votre site peuvent venirsurcharger artificiellement la charge d'information perçue par votrevisiteur. Il faut veiller à tous ces éléments afin de proposer une chargevisuelle et d'information réelle équivalente à la charge perçue.
Éviter les sites trop hétérogènes Ne pas s'éparpiller dans une multitude de typographie, de couleur, de changement de taille...
Utiliser les images de fond avec parcimonie et de manière adaptée au contenu que vous proposez. Une image complexe (affiche, photo avec des personnages,...) rendra la lecture du contenu difficile.
Faire attention aux contrastes entre les images de fond et les éléments de votre site.
Organiser
109
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Éviter l'effet "sapin de noël" Les animations, les gifs animés,... vont nécessairement attirer l'œil, sans pour autant apporter des informations à vos visiteurs. Restez simple, sobre et efficace.
Si vous devez proposer des animations (publicités, auto‐promotion...)veillez à :
ne pas les multiplier,
à proposer desmoyens de les mettre en pause,
à éviter de les faire tourner en boucle,
à ne pas en exécuter plusieurs simultanément. L'être humain ne peut pas suvire 2vidéos enmême temps ! !
Organiser
110
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Trop d'information = pas d'information ! Il faut absolument éviter de mettre sur votre page des informations qui seraient inutiles pour l'internaute. Ce dernier va forcement lire (même très rapidement) tout le contenu de votre page. Il ne doit pas se sentir envahi de données, et trouver rapidement l'information qu'il souhaite. Il est donc important de trouver le juste milieu entre l'information nécessaire et les compléments éventuels, qui seront eux "masqués" à la première lecture. L'internaute pourra choisir de visualiser de lui même si besoin ces contenus additionnels.
Organiser
111
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur un site présentant un film, il peut être intéressant et pertinent d'inscrire les 3‐4 acteurs principaux et le réalisateur et masquer le reste de l'équipe, qui sera accessible, par exemple, par un lien hypertexte. Sur cette fiche Allocine, le lien "plus" mène à la page du casting complet. (Source : www.allocine.fr)
Organiser
112
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
La zone de commande de ce site est facilement identifiable par un fond qui ressort par rapport au reste de la page, et un regroupement de tous les éléments nécessaires à la commande. (Source : www.ldlc.com)
Organiser
113
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Essayer de faciliter la tâche de vos internautes Votre internaute aura toujours une appréhension avant de cliquer sur un lien. Il a besoin de bien comprendre ce qu'il va faire (donc des intitulés clairs et explicites), et il a besoin d'être sûr qu'il va le faire au bon endroit (typiquement ajouter le bon produit dans son panier).
Organiser
114
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Organiser
Sur ces deux exemples (le premier issu de la Fnac.com et le second d'amazon.com), l'un semble aider plus votre visiteur. En effet sur la fnac, il y a un écart entre l'article et "ajouter au panier", ce qui pourrait laisser un doute sur le produit à ajouter. Ce problème est partiellement réduit par le trait qui sépare les articles.
115
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur Amazon.com, aucun doute, le lien est sous le nom du produit. Il y a d'autres problèmes avec ce lien, mais ce n'est pas l'objet ici.
Organiser
116
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Anticiper les besoins de vos internautes Il faut être « voyant » ! Et anticiper ce dont pourrait avoir besoin vos internautes sur votre site.
L'idée est toujours la même, que vos visiteurs restent sur votre site et n'aillent pas chercher des informations ailleurs.
Un exemple assez typique serait le convertisseur de devise. Si votre site se veut international, idéalement vous devez proposer la possibilité soit de convertir vos prix dans la devise de vos visiteurs, soit proposer plusieurs devises significatives de votre clientèle (l'euro, le dollar,...).
Organiser
117
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Multiplier les entrées Selon ses habitudes votre internaute cliquera plutôt sur l'image d'un produit, sur sa description, sur son nom ou sur le lien "détail". Vous ne pouvez pas le savoir. Mais en même temps s'il a l'habitude de choisir l'image et que celle ci n'est pas cliquable, il sera frustré et risque de croire que le site ne fonctionne pas.
Organiser
118
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Sur le site de LDLC, l'image, le nom du produit et le bouton détail sont cliquable et conduisent tous à la description du produit. Noter au passage que le bouton ajouter au panier (juste un pictogramme) est éloigné du produit, mais l'alternance de couleur lève le doute. (Source : www.ldlc.com)
Organiser
119
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Un beau site, bien conçu, ergonomique, avec des informations hiérarchisées, mais est‐il accessible ?
120
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
L'accessibilité... Qu'est ce que c'est ? Produire un "beau" site, un site ergonomique, un site Web 2.0,... c'est bien ! Mais est‐ce que votre internaute peut accéder au contenu de votre site ?
Que se passe‐t‐il si votre visiteur est malvoyant ? A un handicap ? Utilise un navigateur trop ancien ? Utilise un navigateur qui ne supporte pas le CSS, n'affiche pas les images, bloque le javascript, interdit les cookies ... ?
Et si votre internaute cumule tout cela ? ! Et dans un contexte on ne peut plus actuel, et si votre internaute navigue depuis son dernier smartphone ?
Accessibilité
121
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Favoriser l'accessibilité c'est s'assurer un meilleur référencement ! Quoi de plus frustrant que de trouver son "super site web" à la 2198éme
pages des résultats de Google ? Tout simplement parce que Google utilise un "navigateur" qui ne supporte ni le flash, ni le javascript et ne comprend rien aux images...
Optimiser l'accessibilité sera donc bénéfique à votre référencement. Pour l'indexation d'une part, si on fait attention à ce que chaque contenu soit accessible sans flash ou javascript, il sera également accessible aux moteurs de recherches. Pour l'optimisation des mots‐clés d'autre part, en remplissant les balises "alt" et "title" des images par exemple.
Accessibilité
122
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
L'accessibilité c'est standardisé ! ! Chose rare dans l'univers du Web, l'accessibilité est régis par des standards, et ô grande surprise par le W3C. Ce guide regroupe les bonnes pratiques à respecter pour proposer des sites aux personnes handicapées et aux utilisateurs de navigateurs dit 'diminués' (IE n'est pas un navigateur diminué... prés de 50% de la population l'utilise toujours !).
Accessibilité
123
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Outils pour évaluer l'accessibilité Cette partie dresse la liste d'un ensemble d'outils et surtout de point à évaluer sur votre site web.
Les navigateurs "modernes" (Firefox et Chrome) proposent des applications/extensions (Firebug, Web Developper,...) qui permettent d'évaluer cette accessibilité, notamment en masquant les images, en désactivant le CSS, en affichant les propriétés de votre site,...
Ces applications sont nombreuses, ainsi vous chercherez par vous même celle qui vous apporte le plus d'informations pertinentes. Noter que DreamWeaver tend aussi à proposer ce genre d'outils.
Accessibilité
124
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Le WAI (Web Accessibility Initiative) a donc rédigé des conseils pratiques qui peuvent aider les concepteurs web à rendre les sites internet plus accessibles, et ce qui nous intéresse en particulier, c'est le WCAG, les règles pour accessibilité des contenus web.
Avant de se jeter sur les outils d'accessibilité que l'on peut trouver sur le web, il est intéressant de lire ou relire le WCAG 2.0 sur le site du W3C, pour bien comprendre les techniques et mécanismes qui rendront votre contenu accessible au plus grand nombre.
Accessibilité
125
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Le premier test d'accessibilité se passe en profondeur ! La première chose à valider c'est la conformité de votre site aux standards de développement ! Et surtout aux normes HTML/XHTML et CSS.
Pour cela, vous disposez d'outils sur le site du W3C (http://validator.w3.org/).
Une fois votre site valide, n'oubliez pas d'apposer les logos appropriés.
Accessibilité
126
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Analyser votre code HTML Décortiquez votre code html avecWave (disponible en ligne, sur Firefox et même sous DreamWeaver).
C'est un outil interactif pour afficher par dessus votre page web des indications sur vos éléments et balises html, et repérer les quelques oublis ou erreurs à résoudre.
Vous serez notifié avec un petit encart à côté de chacun de vos éléments, pour vous indiquer si oui ou non vous respectez les standards d'utilisabilité, avec un commentaire pour résoudre le problème si problème il y a.
Accessibilité
127
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Le handicap visuel C'est fort logiquement, le plus problématique pour un site web, qui par définition n'est que visuel !
Un exemple de planche du test d'Ishihara pour déceler le daltonisme. Le nombre représenté est le 6. Et une bonne réflexion sur la notion de contraste et de perception de ceux ci !
Accessibilité
128
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Accessibilité
Le handicap le plus important à anticiper c'est le daltonisme. Il touche prés de 10% des hommes et 2% des femmes ! C'est une population non négligeable.
Votre site doit donc être accessible à ces personnes. Cependant ce n'est pas facile d'évaluer ce critère. Est ce que mon site sera accessible et lisible par un daltonien ?
Le plus simple serait d'avoir une connaissance "souffrant" de daltonisme pour évaluer votre site... mais ce n'est "que" 12% de la population. Il faut donc évaluer si vos contrastes passeront, si vos liens resteront identifiables,...
Des outils pour évaluer ce critère, notamment des cercles chromatiques adaptés sont disponible sur le site: http://www.bewype.fr/conception‐web/usabilite‐et‐daltionisme‐design#outils
129
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Accessibilité de vos images Outre les options proposées par les navigateurs pour analyser les 'alt', masquer les images,... il existe un certain nombre d'outils sur le net pour évaluer ce point. Un exemple est le Juicy Studio Image Analyser disponible à cette adresse (http://juicystudio.com/services/image.php)
Avec cet outil, vous pouvez examiner les images de votre site web et vérifier si vous avez scrupuleusement (ou non) rempli les balises alternatives alt et longdesc (optionnel), ainsi que width et height.
L'accessibilité de votre page dépend beaucoup de la facilité qu'ont vos utilisateurs d'interagir avec les images, il est important de s'en préoccuper ; Juicy Studio Image Analyzer est un bon outil pour vous aider là‐dessus.
Accessibilité
130
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Exemple d'analyse que mène Juicy Studio Image Analyser, ici sur le sitewww.amazon.fr.
Accessibilité
131
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Évaluer l'accessibilité sur chaque page, page par page... Ceci peut sembler laborieux... et ca l'est ! mais c'est indispensable. Des extensions de firefox proposent de le faire assez rapidement, comme la Accessibility Evaluation toolbar (disponible ici : https://addons.mozilla.org/en‐US/firefox/addon/accessibility‐evaluation‐toolb/), et d'autres équivalentes sur Chrome.
Cette extension vous permet d'inspecter tous les éléments de design sur votre site. Vous pouvez rapidement lister les images et éléments et valider le respect avec les standards d'accessibilité. Il y a aussi des outils intégrés comme la validation html du w3c directement dans la toolbar.
Accessibilité
132
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Lisibilité de vos textes C'est un autre critère important d'accessibilité, et il existe de nombreux outils d'analyse sémantique. Une fois encore vous trouverez des extensions sur tous les navigateurs modernes (SEOQuake ou Kgen sous firefox par exemple) et des sites vous permettant d'évaluer ce point en ligne : www.online‐utility.org par exemple.
Ces outils vont scruter vos textes, la longueur des mots, le nombre de syllabes, la fréquence de ponctuation, etc.
L'outil générera alors des résultats sous formes de statistiques, mais aussi de « notes » en fonction du niveau d'éducation requis pour lire le texte soumis. Pour plus de concret, l'outil affiche les phrases qui lui semble les plus difficiles. A vous de voir ensuite s'il est judicieux de reformuler, aérer ou scinder les extraits retournés.
Évidemment ces informations sont données à titre indicatif...
Accessibilité
133
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Accessibilité de vos formulaires On en a déjà longuement parlé. Les champs doivent posséder des étiquettes (l'analyse html peut mettre en évidence ces problèmes), champs obligatoires indiqués de manière explicite (une étoile n'est pas suffisante), erreurs indiquées de manière explicite et informative, navigation au clavier facilitée (avec l'ordre de tabulation par exemple)...
Accessibilité
134
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Cette partie du cours dresse l'état d'un ensemble de règle qu'il serait bon de respecter pour tendre à un site parfaitement ergonomique et accessible.
Il n'est pas toujours évident de toutes les respecter, et ca peut dépendre beaucoup du domaine de travail. Les nombreux exemples sont illustratifs et non exhaustif.
Le Web est riche, et de nombreuses autres idées sont présentes. Inspirez vous toujours de vos navigations, de ce que vous aimez et surtout de ce que vous n'aimez pas !
N'hésitez jamais à vous inspirer de ce qui est bien chez les autres.
Conclusions
135
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
Enfin, l'ensemble de ces règles sont des bonnes pratiques, qui correspondent essentiellement aux habitudes actuelles de navigation ! Elles peuvent évoluer, et vous pouvez détenir une idée qui sera très ergonomique.Conclusions
136
Université de Reims Champagne-ArdenneIUT Troyes – DUT MMI
1ère AnnéeM1105
David Annebicque
David.annebicque@univ‐reims.fr
3 avril, 12h00
3 sites ‐> 1page par siteCe que vous aimez et pourquoiCe que vous n’aimez pas et pourquoiCe que vous changeriez
137
Top Related