la web ergonomie, un concept centre sur l'utilisateur visual project

29
La web ergonomie, un concept centré sur l’utilisateur. Présentation par : Sophie Ducq Ahnine http:// www.visualproject.com/agence-webmarketing/creation-de-sites-internet-montpellier.ht ml http ://twitter.com/VisualProject - http://www.facebook.com/visualproject

Upload: sophie-ducq-ahnine

Post on 20-Nov-2014

3.184 views

Category:

Technology


0 download

DESCRIPTION

Les outils du web 2.0 permettent à la plupart des entreprises de s’approprier les nouvelles fonctionnalités du net. De nos jours les sites sont nativement dotés de multiples fonctionnalités et permettent une actualisation aisée, une optimisation pour le référencement optimum, une ouverture sur les réseaux sociaux … Néanmoins l’accompagnement marketing reste incontournable pour une communication efficace. Je décris ici quelques notions en ergonomie web :

TRANSCRIPT

Page 1: La web ergonomie, un concept centre sur l'utilisateur   visual project

La web ergonomie, un concept centré sur l’utilisateur.

Présentation par : Sophie Ducq Ahnine

http://www.visualproject.com/agence-webmarketing/creation-de-sites-internet-montpellier.html

http://twitter.com/VisualProject - http://www.facebook.com/visualproject

Page 2: La web ergonomie, un concept centre sur l'utilisateur   visual project

Pour créer un site il suffit de :

Un nom de domaine,

Un hébergement,

Un éditeur de pages web,

Un programme de création graphique,

Un logiciel de transfert par FTP …

Et l’ergonomie dans tout ça ?

[email protected] - http://twitter.com/VisualProject.com - http://facebook.com/visualproject.com

Page 3: La web ergonomie, un concept centre sur l'utilisateur   visual project

Une ergonomie attractive et cognitive permet :

D’éviter de forts taux de rebond

(% d'internautes qui arrivent sur le site et le quittent aussitôt)

D’activer les leviers d’une bonne communication auprès de vos visiteurs,

De fidéliser vos internautes existants,

[email protected] - http://twitter.com/VisualProject.com - http://facebook.com/visualproject.com

Page 4: La web ergonomie, un concept centre sur l'utilisateur   visual project

Les principales règles ergonomiques selon Jackob Nielsen qui en fut le pionner :

« Simplifier les sites web pour en augmenter l'utilisabilité pour les internautes. »

[email protected] - http://twitter.com/VisualProject.com - http://facebook.com/visualproject.com

Page 5: La web ergonomie, un concept centre sur l'utilisateur   visual project

Jackob Nielsen propose entre autres de :

• Résumer et expliquer clairement le but d'un site sur la page d'accueil,

• Offrir un contenu adapté aux besoins de l'utilisateur,• Donner des réponses brèves aux questions des

navigateurs,• Maintenir une approche minimaliste et éviter les

images trop lourdes,• Offrir un maximum d'éléments fondamentaux

compréhensibles.

Page 6: La web ergonomie, un concept centre sur l'utilisateur   visual project

La web ergonomie est un concept centré sur l’utilisateur,

Elle répond à des caractéristiques

Physiologiques Perceptives

Cognitives

Page 7: La web ergonomie, un concept centre sur l'utilisateur   visual project

Quelques principes ergonomiques fondamentaux

d’un site Internet :

Page 8: La web ergonomie, un concept centre sur l'utilisateur   visual project

L’accessibilité :

Page 9: La web ergonomie, un concept centre sur l'utilisateur   visual project

L’accessibilité :

• Utilisation d’url simple et intuitif

• Temps de chargement des pages réduit (40% des visiteurs quittent votre site s’il met plus de 3 secondes à s’afficher)

• Technologies accessibles par tous et qu'elle que soit le type de machine connectée.

• Conformité aux usages d'Internet habituels.

• Un ensemble homogène favorisant l’accès aux informations recherchées.

Page 10: La web ergonomie, un concept centre sur l'utilisateur   visual project

Le design :

Page 11: La web ergonomie, un concept centre sur l'utilisateur   visual project

Le design :

• Une charte graphique au reflet de l’image de l’entreprise et adapté à sa communication,

• De 3 à 6 couleurs maximum,

• Une typo simple et sobre entre 9 et 12 pour le corps du texte,

• Eviter les majuscules elles ralentissent la lecture de 13 à 20%

Page 12: La web ergonomie, un concept centre sur l'utilisateur   visual project

La navigation :

Page 13: La web ergonomie, un concept centre sur l'utilisateur   visual project

La navigation 1/2 :

• Une page d’accueil sachant aller à l’essentiel : (elle n’aura que 30 secondes pour séduire ses internautes).

• Une arborescence limitant les efforts cognitifs de l’utilisateur,

• Une navigation intuitive permettant de réduire le temps d’accès à l’information recherchée.

Page 14: La web ergonomie, un concept centre sur l'utilisateur   visual project

La navigation 3/3 :

• une hiérarchisation des rubriques et sous rubriques cohérente.

• Les éléments internes facilitant une navigation descendante et transversale

• L’internaute doit savoir en permanence où il est, où il va et d’où il vient.

Page 15: La web ergonomie, un concept centre sur l'utilisateur   visual project

La navigation 2/3 :

Sources :Techniques et bonnes pratiques pour écrire sur le web de Luc Legay

Page 16: La web ergonomie, un concept centre sur l'utilisateur   visual project

La lecture hypertextuelle :

Page 17: La web ergonomie, un concept centre sur l'utilisateur   visual project

La lecture hypertextuelle 1/4 :

La lecture est sur écran 4 fois plus difficile que sur papier :

Ménagez vos lecteurs !

Page 18: La web ergonomie, un concept centre sur l'utilisateur   visual project

La lecture hypertextuelle 2/4 :

La lecture hypertextuelle demande beaucoup d’efforts cognitifs, vos lecteurs devront à la fois :

• Lire des informations, • En vérifier leur pertinence, • Choisir leur parcours de lectures.

Page 19: La web ergonomie, un concept centre sur l'utilisateur   visual project

La lecture hypertextuelle 3/4 :

Sens de la lecture hypertextuelle :

Les études d'eye-tracking (ou oscillométriques) démontrent que la lecture d'une page web suivent un chemin en E.

Page 20: La web ergonomie, un concept centre sur l'utilisateur   visual project

La lecture hypertextuelle 4/4 :

En "F" dans le fameux triangle d'or de Google.

Page 21: La web ergonomie, un concept centre sur l'utilisateur   visual project

Le contenu textuel :

Page 22: La web ergonomie, un concept centre sur l'utilisateur   visual project

Le contenu textuel 1/2 :

« Le lecteur fait une lecture rapide sans prélèvements d’informations. Il ne s’attarde pas sur le contenu ».

André Tricot reconnu en psychologie cognitive et en sciences de l'information et de la communication.

Page 23: La web ergonomie, un concept centre sur l'utilisateur   visual project

Le contenu textuel 2/2 :

• Une rédaction à partir de phrases et de paragraphes courts,

• Une mise en avant de vos phrases clés en gras,

• Des titres et sous titres explicites.

Ces techniques sont également recommandées pour le référencement du site.

Page 24: La web ergonomie, un concept centre sur l'utilisateur   visual project

Les fonctionnalités

Page 25: La web ergonomie, un concept centre sur l'utilisateur   visual project

Les fonctionnalités 1/3 :

Moins on en met, plus c'est facile :

Moins on met d'éléments sur une page web, moins cette dernière est difficile à appréhender mentalement.

Le plus difficile reste bien sûr d'obtenir un bon équilibre...

Page 26: La web ergonomie, un concept centre sur l'utilisateur   visual project

Les fonctionnalités 2/3 :

La fonctionnalité de recherches est l’une de celles qui apporte le plus de valeur ajoutée :

Plus vos visiteurs perdent du temps à fouiller votre site, plus vous augmentez votre taux de rebond.

C’est à l’information souhaitée de se présenter pas l’inverse.

Page 27: La web ergonomie, un concept centre sur l'utilisateur   visual project

Les fonctionnalités 3/3 :

De nos jours il n’est plus possible d’ignorer les réseaux sociaux, vos blogs comme votre site se doivent de proposer vos accès à Facebook, Twitter …

Page 28: La web ergonomie, un concept centre sur l'utilisateur   visual project

Votre site à partir de 490 €, par Visual Project:• Choix de votre nom de domaine ou transfert du nom de domaine existant.

• Site évolutif avec intégration et paramétrage de la dernière version du C.M.S WordPress

• Hébergement sur un serveur sécurisé.

• Intégration de votre logo

Référencement :• Module d’optimisation pour les outils de recherche (All in One SEO Pack)

• Module Google XML Sitemap pour une parfaite indexation sur google.

• Lancement de votre 1ère campagne de liens sponsorisés Google Adwords**Offre complémentaire

Exemple de modules complémentaires à l’offre : • Intégration du bouton "J'aime" de Facebook sur les pages ou articles de votre choix (Facebook Like

Box)

• Bookmarks pour partager vos pages et articles en un clic sur les réseaux sociaux de votre choix (SexyBookmarks) (by Shareaholic)

Sans abonnement ni engagement, vous êtes autonome et indépendant

04 67 59 51 23