Régles d'ergonomie

Formation web : règles d'ergonomie web. Cette carte permet d'avoir un aperçu global de l'organisation de la formation.

Get Started. It's Free
or sign up with your email address
Régles d'ergonomie by Mind Map: Régles d'ergonomie

1. la charte graphique, adresse, TVA, orthographe, photos, page contact, conditions de vente, vie privée.

2. Ergonome vs web designer

2.1. IU

2.1.1. Efficacité

2.1.1.1. Optimisation des parcours

2.2. UX

2.2.1. Émotion

2.2.1.1. Storytelling dans une expérience d'utilisation

3. Définition

4. Persona, utilisateur, client, cible

4.1. Recherche d'informations

4.1.1. Commanditaire

4.1.2. Statcounter

4.1.3. Alexa

4.1.4. Google Analytics

4.1.5. economie.fgov

4.1.6. Analyse concurrentielles

4.1.7. AWT

4.1.8. Statbel

4.1.9. DNS.be

4.1.10. Belgium.be

4.1.11. IWEPS

4.2. Exercice

4.2.1. Etablir une fiche persona avec un scénario de visite

4.2.2. Présenter oralement sa fiche persona

4.3. Synthétiser les différentes fiches

5. Commanditaire

5.1. Besoins et objectifs

5.1.1. Définir les besoins du commanditaire

5.1.1.1. Besoins prioritaires et secondaires

6. Arborescence

6.1. Tri de carte

6.1.1. Exercice

6.1.1.1. Travail en groupe : énumérer et catégoriser

6.2. Arborescence fonctionnelle

6.2.1. Structurer l'arborescence prévisionnelle avec un logiciel en ligne

6.2.2. CMS

6.2.3. Bootstrap

6.3. Aperçu des différentes techniques de navigation

7. Zoning, sketching...

7.1. Organiser le contenu

7.1.1. Exercice

7.1.1.1. Réaliser le zoning d'un site Internet : 960px

7.1.2. Exercice

7.1.2.1. Contrôler le scénario des personas

7.1.3. Exercice

7.1.3.1. Réaliser le zoning d'un site Internet : 320px

8. Nakatomi-formation.be

9. Twitter : @nakatomi

10. Laurent Mottet

11. Structure d'une page web

11.1. Hierarchie de l'information

11.2. Grilles et média-queries

11.2.1. 960.gs

11.2.2. Resize my browser

11.2.3. Screenfly

11.2.4. Responsinator

11.2.5. Exemples de sites

11.3. Sens de lecture

11.4. Typographie

11.5. Choix de font

11.5.1. Google font

11.5.2. Font Squirrel

11.6. Perfect Page

11.6.1. Crédibilité

11.6.2. Personnalisation

11.6.2.1. Personas, prospect - client - remarketing

11.6.3. Attractivité

11.6.3.1. émotion, envie de jouer

11.6.4. Sollicitation

11.6.4.1. envie de revenir, interaction sociale

11.6.5. Ambiance

11.6.5.1. valeur, émotion, organisation visuelle, crédibilité, identification de la société, la réputation, base-line

11.6.6. Architecture

11.6.6.1. moyen de naviguer dans le site : barre, onglet, moteur, filtre, lien, bouton

11.6.7. La navigation

11.6.7.1. localisation dans le site, dans la page (couleur du lien, fil d’ariane) niveau, profondeur

11.6.8. Convention - standard

11.6.8.1. (lien souligné standard - couleur d’un bouton une convention), home = lien, les familles, la typographie, la taille, la ligne de flottaison, la lisibilité, les couleurs, le contraste, SEO : Titre de la fenêtre + meta description, Identification : Logo + Baseline, Call to action

11.6.9. Capitaliser l’apprentissage interne du site web, l'objet mental

11.6.9.1. se forger un modèle mental, template, blocs, colonne, navigation, localisation dans le site, type de lien, la hiérarchie du contenu

11.6.10. La terminologie

11.6.10.1. sémantique des groupes (oiseaux, animaux…) Home, contact, Panier...

11.6.11. Trouver l’Information

11.6.11.1. filtre, couleur de liens, intitulé d’un bouton, affordance des éléments, les espacements, la rapidité d’accès de l'information

11.6.12. Assistance/Aide

11.6.12.1. fil d’ariane, clics logiques

11.6.13. Gestion des erreurs

11.6.13.1. Liberté : laisser l’internaute commander, d’interagir, formulaire obliger de donner son nr de téléphone, obliger d’utiliser la barre de nav

11.6.13.2. 404, retour possible à une page précédente, mentionner le poids d’un fichier et son format, formulaire, choisir une autre produits/services, une autre langue

11.6.14. Rapidité

11.6.15. Accessibilité

11.6.15.1. Physique et technologique

11.6.16. Satisfaction du prospect

11.6.16.1. Scénario des personas

11.6.17. Compréhension

11.6.17.1. : Bien choisir les mots, phrase et les symboles

12. Exercices

12.1. Sketching

12.2. Zoning

12.3. Prototype

12.4. wireframe

12.5. Wireframe hi

13. Trendboard

13.1. Couleurs

13.1.1. Color lovers

13.1.2. Color HEX

13.2. Recherche de style

13.2.1. Niice

13.2.2. Themeforest

14. Méthode Agile

14.1. Livrer rapidement des fonctionnalités à forte valeur ajoutée

14.2. Accepter les changements

14.3. Livrer une version fonctionnelle - 2 semaines

14.4. Collaborer avec développeur...

14.5. Transmettre l'information dans une conversation face à face

14.6. À intervalle régulier, l’équipe réfléchit aux moyens de devenir plus efficace, puis accorde et ajuste son processus de travail en conséquence.