Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Régles d'ergonomie by Mind Map: Régles d'ergonomie
5.0 stars - 1 reviews range from 0 to 5

Régles d'ergonomie

Ergonome vs web designer

IU

Efficacité, Optimisation des parcours

UX

Émotion, Storytelling dans une expérience d'utilisation

Définition

Persona, utilisateur, client, cible

Recherche d'informations

Commanditaire

Statcounter

Alexa

Google Analytics

economie.fgov

Analyse concurrentielles

AWT

Statbel

DNS.be

Belgium.be

IWEPS

Exercice

Etablir une fiche persona avec un scénario de visite

Présenter oralement sa fiche persona

Synthétiser les différentes fiches

Commanditaire

Besoins et objectifs

Définir les besoins du commanditaire, Besoins prioritaires et secondaires

Arborescence

Tri de carte

Exercice, Travail en groupe : énumérer et catégoriser

Aperçu des différentes techniques de navigation

Arborescence fonctionnelle

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

CMS

Bootstrap

Zoning, sketching...

Organiser le contenu

Exercice, Réaliser le zoning d'un site Internet : 960px

Exercice, Contrôler le scénario des personas

Exercice, Réaliser le zoning d'un site Internet : 320px

Nakatomi-formation.be

Twitter : @nakatomi

Laurent Mottet

Structure d'une page web

Hierarchie de l'information

Grilles et média-queries

960.gs

Resize my browser

Screenfly

Responsinator

Exemples de sites

Sens de lecture

Typographie

Choix de font

Google font

Font Squirrel

Perfect Page

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

Personnalisation, Personas, prospect - client - remarketing

Attractivité, émotion, envie de jouer

Sollicitation, envie de revenir, interaction sociale

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

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

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

Capitaliser l’apprentissage interne du site web, l'objet mental, se forger un modèle mental, template, blocs, colonne, navigation, localisation dans le site, type de lien, la hiérarchie du contenu

Convention - standard, (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

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

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

Assistance/Aide, fil d’ariane, clics logiques

Gestion des erreurs, 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

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

Accessibilité, Physique et technologique

Satisfaction du prospect, Scénario des personas

Compréhension, : Bien choisir les mots, phrase et les symboles

Exercices

Sketching

Zoning

Prototype

wireframe

Wireframe hi

Trendboard

Couleurs

Color lovers

Color HEX

Recherche de style

Niice

Themeforest

Méthode Agile

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

Accepter les changements

Livrer une version fonctionnelle - 2 semaines

Collaborer avec développeur...

Transmettre l'information dans une conversation face à face