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.
Régles d'ergonomie
von Laurent Mottet
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