Régles d'ergonomie

1. Perfect Page / Audit d'une page

1.1. Crédibilité

1.2. Personnalisation

1.2.1. Personas, prospect - client - remarketing

1.3. Attractivité

1.3.1. émotion, envie de jouer

1.4. Sollicitation

1.4.1. envie de revenir, interaction sociale

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

1.6. SEO - Titre + meta description

1.6.1. Clic à partir du SERP

1.7. Responsive

1.8. Accessibilité

1.8.1. Physique et technologique

1.9. Ambiance

1.10. Architecture

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

1.11. La navigation

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

1.12. Convention - standard

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

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

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

1.14. La terminologie

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

1.15. Trouver l’Information

1.16. Assistance/Aide

1.16.1. fil d’ariane, clics logiques

1.17. Gestion des erreurs

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

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

1.18. Rapidité

1.19. Satisfaction du prospect

1.19.1. Scénario des personas

1.20. Compréhension

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

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

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

3. Ergonome vs web designer

3.1. IU

3.1.1. Efficacité

3.1.1.1. Optimisation des parcours

3.2. UX

3.2.1. Émotion

3.2.1.1. Storytelling dans une expérience d'utilisation

4. Définition

5. Persona, utilisateur, client, cible

5.1. Exercice

5.1.1. Recherche d'informations

5.1.1.1. Commanditaire

5.1.1.1.1. Factures

5.1.1.1.2. Carte de fidélité

5.1.1.1.3. Sondage

5.1.1.2. Statcounter

5.1.1.3. Alexa

5.1.1.4. Google Analytics

5.1.1.5. economie.fgov

5.1.1.6. Analyse concurrentielles

5.1.1.7. AWT

5.1.1.8. Statbel

5.1.1.9. DNS.be

5.1.1.10. Belgium.be

5.1.1.11. IWEPS

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

5.1.3. Présenter oralement sa fiche persona

5.2. Synthétiser les différentes fiches

6. Commanditaire

6.1. Besoins et objectifs

6.1.1. Définir les besoins du commanditaire

6.1.1.1. Besoins prioritaires et secondaires

7. Arborescence

7.1. Tri de carte

7.1.1. Exercice

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

7.2. Arborescence fonctionnelle

7.2.1. CMS

7.2.2. Bootstrap

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

8. Zoning, sketching...

8.1. Organiser le contenu

8.1.1. Exercice

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

8.1.2. Exercice

8.1.2.1. Contrôler le scénario des personas

8.1.3. Exercice

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

9. Nakatomi-formation.be

10. Twitter : @nakatomi

11. Laurent Mottet

12. Structure d'une page web

12.1. Hierarchie de l'information

12.2. Grilles et média-queries

12.2.1. 960.gs

12.2.2. Resize my browser

12.2.3. Screenfly

12.2.4. Responsinator

12.2.5. Exemples de sites

12.3. Sens de lecture

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

12.4. Typographie

12.5. Choix de font

12.5.1. Google font

12.5.2. Font Squirrel

13. Exercices

13.1. Sketching

13.2. Zoning

13.3. Prototype

13.4. wireframe

13.5. Wireframe hi

14. Trendboard

14.1. Couleurs

14.1.1. Color lovers

14.1.2. Color HEX

14.2. Recherche de style

14.2.1. Niice

14.2.2. Themeforest

15. Méthode Agile

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

15.2. Accepter les changements

15.3. Livrer une version fonctionnelle - 2 semaines

15.4. Collaborer avec développeur...

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

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