03 September 2010

Inscrivez-vous au Flux RSS

Design d’interface et critère ergonomique : Feedback Direct

Posted by jc-Qualitystreet on 1 septembre 2010

Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.

  • Critère n°1 Incitation
  • Critère n°2 : Lisibilité
  • Critère n°3 : Groupement-Distinction entre items
  • Critère n°4 : Feedback Direct
  • Feedback Direct : en quoi ça consiste ?

    C’est l’art de tenir l’utilisateur, en temps réel, informé de ce qui se passe

    Ce critère concerne les réponses du système consécutives aux actions des utilisateurs. Son absence est  source d’incompréhension, parfois déstabilisante selon les contextes. Sa présence est un fort élément de réassurance.

    Pertinence, compréhension, localisation et rapidité sont les dimensions essentielles du feedback de qualité.

    Quelques exemples de recommandations :

    • Rendre le feedback immédiat
    • Indiquer clairement les traitements en cours
    • Proposer un indicateur d’avancement du traitement des tâches par le système (y compris le chargement des pages)
    • Adapter le feedback à l’action engagée et s’assurer de sa pertinence
    • Utiliser l’autocompletion comme aide à la saisie
    • Pour les saisies de formulaire, assurer autant que possible des vérifications directes en sortie de champs
    • Toujours faire apparaitre sur l’écran les entrées effectuées par l’utilisateur
    • Informer les utilisateurs de leur connectivité

    Les mauvaises pratiques sont essentiellement liées à l’absence de feedback.

    Quelques bons exemples … so GOOD !

    Bonne pratique pour patienter:

    Petite musique d'attente :)

    Petite message d'attente :)

    Petite musique d'attente et quelques variations:)

    Petite message d'attente et quelques variations:)

    Autre bonne pratique avec le Drag&Drop (le modèle Flickr est très efficace)

    Drag&Drop temps 1

    Drag&Drop temps 1. Trés bonne incitation au départ

    Drag&Drop temps 2

    Drag&Drop temps 2: Juste ce qu'il faut de FEEDBACK

    Drag& Drop Temps 3

    Drag& Drop Temps 3: Opération terminée. Le feedback sur la droite

    Drag&Drop On supprime le fichier. Quelle belle image !!!

    Drag&Drop On supprime le fichier. Quelle belle image !!!

    Autre bonne pratique chez Twitter (refresh)

    feedback4-twitter

    42 nouveaux Tweets. Je dois rafraîchir ma page

    Autre bonne pratique (limite de saisie):

    Twitter. Nombre de caractère restant Au départ

    Twitter. Nombre de caractère restant Au départ. 140 caractères.

    Twitter. Nombre de caractère restant en live

    Twitter. Nombre de caractère restant en cours de saisie.

    Autre bonne pratique (ajout d’item)

    BaseCamp: Nouvel Item. Surlignement jaune pendant 1 seconde

    BaseCamp: Nouvel Item. Surlignement jaune pendant 1 seconde

    Autre bonne pratique (feedback Téléchargement)

    Feedback Indicateur de progrés. Téléchargement Du classique très efficace chez Google

    Feedback Indicateur de progrés. Téléchargement Du classique très efficace chez Google

    Autre bonne pratique (traitement de l’opération)

    Feedback - Traitement de l'opération

    Feedback - Traitement de l'opération

    Autre bonne pratique Envoi de message (toujours Google)

    Envoi de message. Bon feedback de Google

    Envoi de message. Bon feedback de Google

    Autre bonne pratique au sein de formulaire (Google encore …)

    Vérification en directe du degré de sécurité du mot de passe 1

    Vérification en directe du degré de sécurité du mot de passe 1

    Vérification en directe du degré de sécurité du mot de passe 2

    Vérification en directe du degré de sécurité du mot de passe 2

    Autre bonne pratique (plus qu’une aide à la saisie)

    Aide à la saisie Temps 1

    Aide à la saisie Temps 1

    Aide à la saisie Temps 2

    Aide à la saisie Temps 2

    Autre bonne pratique (vérification avec contrôle utilisateur: pas mal)

    Last FM Vérifier la disponibilité Temps 1

    Last FM Vérifier la disponibilité Temps 1

    Last FM Vérifier la disponibilité Temps 2

    Last FM Vérifier la disponibilité Temps 2 avec feedback

    Design d’interface et critère ergonomique 3 : Groupement - Distinction entre Items

    Posted by jc-Qualitystreet on 5 août 2010

    Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question.

    • Critère n°1 : Incitation
    • Critère n°2 : Lisibilité
    • Critère n°3 : Groupement-Distinction entre items

    Groupement - Distinction entre items : en quoi ça consiste ?

    C’est l’art de regrouper ce qui va ensemble pour favoriser une meilleure distinction et reconnaissance des éléments. Ce critère concerne l’organisation visuelle des items les uns par rapport aux autres. Le groupement ou la distinction des informations s’appuie sur deux stratégies :

    • la localisation (c’est-à-dire par le positionnement)
    • le format (c’est-à-dire par les caractéristiques graphiques)
    Liens commerciaux Top vs Colonne vs Référencement Naturel:un Layout efficace

    Liens commerciaux Top vs Colonne vs Référencement Naturel: un Layout efficace. Distinction par localisation et format

    Le critère s’appuie aussi plus largement sur la théorie de la Gestalt et sur les lois de perception visuelle: proximité, similarité, fermeture, continuité…

    Les Lois de la Gestalt

    Les Lois de la Gestalt

    Quelques exemples de recommandations

    • Utiliser la couleur pour distinguer les éléments de la barre de navigation, les contrôles actifs / inactifs
    • Distinguer graphiquement l’item de navigation secondaire en cours de consultation et le mettre en valeur (ex: une puce, une couleur de typographie, un aplat…)
    • Différencier les liens visités des liens non-visités
    • Différentier l’item présentant la page en cours de consultation mais le rendre « non cliquable »
    • Séparer les éléments du fil d’Ariane par le signe > avec 1 espace avant et après
    • Regrouper les fonctions transverses dans une zone située en haut à droite, et les ‘afficher de manière constante sur l’ensemble du site

    Des mauvaises pratiques

    Pas de groupement - pas de hiérarchisation : la CATA !

    Des groupements inadaptés - pas de hiérarchisation ... surcharge visuelle !!

    Autre mauvais exemple:

    L'espace est un élément crucial pour la distinction des items. Ici ...

    L'espace est un élément crucial pour la distinction des items. Ici c'est raté !

    Autre mauvais exemple :

    distinction_bad-3

    Autre mauvais exemple:

    Une distinction entre action 1 et 2 aurait été préférable

    Une distinction entre action 1 et 2 aurait été préférable

    Quelques bons exemples … so GOOD !

    Trés bonne distinction entre les deux actions (bonne prévention des erreurs)

    Trés bonne distinction entre les deux actions (bonne prévention des erreurs)

    Autre exemple:

    Distinction des rubriques par couleurs

    Distinction des rubriques par couleurs

    Autre exemple:

    Zoning. Distinction des zones de l'écran. Extrait Charte ergonomique DGME

    Zoning. Distinction des zones de l'écran. Extrait Charte ergonomique DGME

    Autre exemple:

    Trés belle distinction des zones et des items au sein du formulaire Ebay

    Trés belle distinction des zones et des items au sein du formulaire Eba

    Design d’interface et critère ergonomique 2 : Lisibilité

    Posted by jc-Qualitystreet on 4 août 2010

    Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères qui sont valides pour tous les types d’interface. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement et les équipes Business.

    Lisibilité : en quoi ça consiste ?

    C’est faciliter la lecture et favoriser la compréhension de ce qui est affiché à l’écran. Ce critère ergonomique recouvre en effet deux dimensions : le processus physiologique de lecture mais aussi la compréhension de ce qui est lu.

    Lisible et incitatif

    Lisible et incitatif

    La lisibilité va donc concerner les caractéristiques de présentation des informations sur l’écran pouvant entraver ou faciliter la lecture de ces informations : luminance des caractères, dimension des lettres, des lignes, espacement entre les mots, interlignes, couleurs et contrastes.

    Quelques exemples de recommandations :

    • Utiliser une police sans serif (empattement), telles que Verdana, Arial ou Helvetica (ou leur équivalent), conçues pour la lecture à l’écran.
    • Assurer la lisibilité du texte en jouant sur le contraste avec l’arrière plan (valeur de contraste au minimum de 80 %)
    • Préférer un fond clair à un fond sombre
    • Favoriser le mode positif  avec Texte noir sur fond blanc / clair
    • Sur fond clair (blanc/ gris pâle), éviter le jaune, vert pâle ou cyan, le bleu, rouge, violet
    • Assurer un contraste constamment satisfaisant entre la page et la barre de navigation, entre les items de la barre de navigation et leur arrière plan

    Deux mauvaises pratiques

    Mauvais contraste

    Mauvais contraste

    Autre exemple

    Une lecture très difficile !!!

    Une lecture très difficile !!!

    Quelques bons exemples … so GOOD !

    Tout est dit !

    Tout est dit !

    Autre exemple:

    Contenus lisibles et bien délimités. Bons Contrastes.

    Contenus lisibles et bien délimités. Bons Contrastes.

    Autre exemple:

    Dans les deux cas : très lisible mais plus de douceur et moins de fatigue au quotidien avec le Gris

    Dans les deux cas : très lisible mais plus de douceur et moins de fatigue au quotidien avec le Gris

    Design d’interface et critère ergonomique 1 : l’Incitation

    Posted by jc-Qualitystreet on

    Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères qui sont valides pour tous les types d’interface. C’est une liste personnelle, affinée, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), et que je m’efforce de partager au quotidien avec les équipes de développement et les équipes Business.

    Incitation : en quoi ça consiste ?

    C’est accompagner l’utilisateur dans sa tâche, le renseigner sur le contexte dans lequel il se trouve, l’orienter, l’amener à effectuer des actions spécifiques tout en prévenant au maximum l’indécision. L’incitation est donc un critère essentiel pour l’utilisateur qui s’est renforcé d’un point de vue business autour des problématiques de marketing digital.

    Tous les leviers de l'Ergonomie Incitative
    Tous les leviers de l’Ergonomie Incitative

    Éléments d’ergonomie incitative ou d’assistance sur formulaires, architecture de l’information simple et adaptée, fil d’Ariane, indicateur d’étape (pour une navigation guidée), identité visuelle par univers, autant d’éléments qui favorisent une bonne incitation.

    Quelques exemple de recommandations …

    • Limiter les points d’entrée sur l’interface, les rendre descriptifs et « orientés-tâches »
    • Proposer un titre à chaque page, court et signifiant
    • Proposer sur chaque page du site des éléments de navigation et de repérage permettant à l’utilisateur de répondre à trois questions : Où suis-je ?, D’où viens-je ?, Où puis-je aller ?
    • S’assurer que le système de navigation principal indique visuellement à l’utilisateur dans quel menu ou rubrique il se trouve
    • Prévoir un fil d’Ariane sur toutes les pages intérieures, le positionner sous la barre de navigation globale, mais toujours au-dessus du titre de page
    • Proposer un indicateur d’étapes en cas de navigation guidée par exemple pour les processus dont la saisie est décomposée en plusieurs pages et / ou nécessite un écran « récapitulatif »

    Deux mauvaises pratiques

    Par où commencer ? Comment ça marche ?
    Par où commencer ? Comment ça marche ?

    Pas évident !!
    Pas évident !!

    Quelques bons exemples … so GOOD !

    Rappel avant de démarrer et indicateur d'étapes

    Rappel et Indicateur d'étapes

    Autre exemple :

    Invitation Claire

    Aussitôt arrivé, aussitôt guidé !

    Autre exemple:

    Parfaite incitation

    Parfaite incitation

    Autre exemple:

    Choix limité

    Choix limité

    Autre exemple :

    Droit au but !
    Droit au but !

    Autre exemple :

    Suivez le guide !
    Suivez le guide !

     

    Portails d’entreprise : 7 bénéfices pour les Utilisateurs

    Posted by jc-Qualitystreet on 27 juillet 2010

    Les projets de conception de portail d’entreprise se sont multipliés ces dernières années. Face à cette montée en puissance de l’outil informatique, le feedback des utilisateurs doit rester le premier indicateur du succès de ce type de projet.

    La valeur d’un portail d’entreprise repose donc avant tout sur une expérience utilisateur positive. Même si cette expérience Utilisateur peut s’appréhender différemment, la valeur intrinsèque du portail pour l’Entreprise et les Personnes se mesure quant à elle très facilement :

    • Retirer le portail à ses utilisateurs pendant quelques heures ou quelques jours et voyez, écoutez ce qui se passe !
    • Observer l’activité de l’utilisateur avec et sans le portail, mesurer les temps respectifs pour effectuer les tâches de travail, et voyez la différence !

    Ces 7 bénéfices côté utilisateur sont donc les suivants :

    1 Une information personnalisée
    2 Des applications et services fédérés et personnalisés
    3 Une interface customisable
    4 Une apparence et un système de navigation cohérents
    5 Un environnement de sécurité unifié
    6 Une collaboration plus efficace et plus transparente
    7 Une Vue « Tableau de bord » et la vision globale

    1 Une information personnalisée

    C’est l’essence même du portail d’entreprise de fournir à ses utilisateurs non seulement un accès personnalisé, mais aussi une personnalisation de l’information. Cette fonction de personnalisation est l’assurance pour l’utilisateur de recevoir une information concise et pertinente à l’heure où les sources et supports d’information se multiplient, où l’information devient de plus en plus riche alors que le temps de lecture disponible lui ne s’allonge pas.

    Home Portail

    Home Portail

    Cette forme de personnalisation, souvent dénommée « Personnalisation implicite », est ciblée selon un principe de gestion des droits et repose sur l’identification rigoureuse de profils utilisateurs basés en priorité sur cinq éléments : Qui est l’utilisateur ? Quel est son rôle ? Quel est son travail, son métier ? Quels sont ses besoins ? Quelles sont ses communautés ?

    Attribution des droits pour un extranet

    Attribution des droits pour un extranet

    2 Des applications et services fédérés et personnalisés

    Le portail d’entreprise devient facilitateur de travail en proposant en un seul endroit les accès personnalisés aux applications et services de l’entreprise. L’utilisateur ne se voit proposer que les applications auxquelles il a droit, celles par exemple dont il se sert dans le cadre de son activité.

    Accès aux applications métiers de l'entreprise

    Accès aux applications métiers de l'entreprise

    Applications métiers mais pas seulement : l’annuaire de l’entreprise et la recherche de personnes sont depuis longtemps l’application les plus utilisées sur les portails Intranet : « the killer applications » !

    La KILLER APP

    La KILLER APP

    Cette dimension est l’un des bénéfices immédiats les plus facilement mesurables. Il atteste de la valeur d’usage des portails d’entreprises.

    3 Une interface customisable

    La capacité de customiser son interface s’est démocratisée avec les portails Internet grand public (My yahoo, iGoogle, Netvibes). On parle souvent de « personnalisation explicite » dans le sens où elle est contrôlée explicitement par l’utilisateur, pourtant le terme « customisation » me semble plus juste.

    Netvibes

    Netvibes

    La customisation de l’interface répond  à des attentes utilisateurs et à des critères ergonomiques majeurs comme le contrôle explicite, la flexibilité et la compatibilité. L’utilisateur a la possibilité de modeler sa page selon ses préférences, et de contrôler (ajouter, retirer, modifier) certains éléments du portail : favoris, raccourcis, thèmes, couleurs, titres et libellés…

    Google gadgets pour IBM webSphere

    Il peut aussi changer l’apparence et le positionnement de blocs fonctionnels et de contenu, modifier leur état, les fusionner voire les désactiver.

    4 Une apparence et un système de navigation cohérents

    L’homogénéisation des applications et services en terme de navigation et d’apparence est souvent l’une des raisons pour lesquelles une entreprise se lance dans un projet portail. Le caractère unifié de l’interface fournit en effet des repères aux utilisateurs qui leur permettent à la fois de réduire le temps d’apprentissage (au lancement du portail ou de nouvelles applications) et le temps pour accéder aux informations (dans leur activité quotidienne).

    5 Un environnement de sécurité unifié

    Le SSO (Single Sign On) permet à l’utilisateur de ne pas avoir répété son mot de passe quand il se connecte aux applications de l’entreprise. Dans des contextes Business to Employee, le SSO n’est pas toujours aisé mais fait partie de ces éléments différentiant à forte valeur ajoutée. Outre les gains de confort dans l’utilisation quotidienne du portail, et une plus grande  satisfaction des utilisateurs, le SSO est un véritable accélérateur de l’activité des collaborateurs dont l’impact positif en termes de sécurité (fin des mots de passe notés sur post it) et de support (moins d’appels au helpdesk) n’est pas négligeable.

    Page Portail Personnalisée

    Page Portail Personnalisée

    6 Une collaboration plus efficace et plus transparente

    Le portail d’entreprise est un outil de collaboration en lui même. Les outils collaboratifs présents dans les portails d’entreprise permettent de fluidifier les échanges autour d’un métier de l’entreprise, d’un projet ou d’une thématique donnée. J’ai coaché plusieurs équipes Agiles qui utilisaient ce type d’espace pour leur projet : base documentaire, suivi des itérations…

    Gestion documentaire Projet

    Gestion documentaire Projet

    En réduisant les distances, les portails d’entreprise permettent aussi à des équipes distribuées de travailler plus confortablement ou des communautés d’échanger et de communiquer plus facilement.
    De nouvelles capacités de publication plus homogènes permettent à tous de publier, et d’être acteurs de la communauté en toute simplicité.

    Outils collaboratifs

    Outils collaboratifs

    Espaces documentaires, espaces projets, espaces communautaires, wiki… autant d’outils au service de la collaboration et de la capitalisation des savoirs.

    7 Une Vue « Tableau de bord » et la vision globale

    Le portail d’entreprise permet de donner une vue globale sur le métier de certains collaborateurs de l’entreprise sur leur processus métier pour une productivité maximale. Qu’il s’agisse de la page d’accueil ou d’une page dédiée, le tableau de bord (notamment BI, Business Intelligence) est devenu un incontournable pour beaucoup d’acteurs de l’entreprise, un vecteur d’adoption du nouvel outil.

    Dashboard Portail

    Dashboard Portail

    Exemple de Dashboard

    Exemple de Dashboard

    Sales Dashboard

    Sales Dashboard

    Get Adobe Flash playerPlugin by wpburn.com wordpress themes