Université de Reims Écriture pour les médias...

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


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


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


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


1ère AnnéeM1105

David Annebicque

Quelques références intéressantes

5


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque

Organiser l’information

10


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


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


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


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


1ère AnnéeM1105

David Annebicque


17

Sens de lecture d’une page web (interface)


1ère AnnéeM1105

David Annebicque


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 »


1ère AnnéeM1105

David Annebicque


Accessibilités des éléments Avec la souris

19



1ère AnnéeM1105

David Annebicque


Sur des terminaux mobiles et tactiles

20



1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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%


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


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


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


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


1ère AnnéeM1105

David Annebicque

La navigation

27


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


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


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


1ère AnnéeM1105

David Annebicque

Objectifs

Fournir une vue globale du site Barre de navigation détaillée (mais pas trop)

illustrer

31


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


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


1ère AnnéeM1105

David Annebicque


34


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


36


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.


37


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


1ère AnnéeM1105

David Annebicque


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


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.


40


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


1ère AnnéeM1105

David Annebicque


42


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque

Naviguer autrement

La recherche

Le plan du site

44


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


1ère AnnéeM1105

David Annebicque


46


1ère AnnéeM1105

David Annebicque

Les éléments de navigation Onglets

47


1ère AnnéeM1105

David Annebicque


Menus déroulants éviter les sous‐menus

48


1ère AnnéeM1105

David Annebicque


Le méga‐menu

49


1ère AnnéeM1105

David Annebicque


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


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)


51


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


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 !


55


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.


56


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque

Créer et favoriser l’interaction

59


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


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)


71


1ère AnnéeM1105

David Annebicque


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


1ère AnnéeM1105

David Annebicque


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


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


1ère AnnéeM1105

David Annebicque


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)


1ère AnnéeM1105

David Annebicque


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


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)


77


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)


78


1ère AnnéeM1105

David Annebicque


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


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)


80


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.


81


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....


82


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)


83


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)


84


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.


85


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


86


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


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


1ère AnnéeM1105

David Annebicque

Minimiser l’attente et éviter l’inutile

89


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


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


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


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


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


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


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


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


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


1ère AnnéeM1105

David Annebicque

Organiser

99


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


1ère AnnéeM1105

David Annebicque

Un beau site, bien conçu, ergonomique, avec des informations hiérarchisées, mais est‐il accessible ?

120


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


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


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


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


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


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


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


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


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


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


1ère AnnéeM1105

David Annebicque

Exemple d'analyse que mène Juicy Studio Image Analyser, ici sur le sitewww.amazon.fr.

Accessibilité

131


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


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


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


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


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


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

Université de Reims Écriture pour les médias...

Documents

Transcript of Université de Reims Écriture pour les médias...