Posté par jc-Qualitystreet le 30 novembre 2010
Les interfaces riches basées sur le navigateur web proposent de nouvelles modalités de présentation, de nouveaux comportements et au final plus d’interactivité ; l’enjeu ergonomique est fort alors que l’offre technologique RIA (Rich Internet Applications, Ajax ou d’Adobe et de Microsoft) est aujourd’hui mature et que les utilisateurs semblent prêts.
Cette évolution technologique ne signifie pas pour autant rupture avec les critères ergonomiques de base dont le respect assure une bonne utilisabilité de l’interface.
Il est évident que les bénéfices des RIA ne peuvent s’observer qu’à partir du moment où les interactions sont pensées en regard de l’activité des utilisateurs, et que le tout est employé avec précautions. Seule leur association permettra de garantir une Experience Utilisateur Riche et Réussie.
Deux exemples illustrent parfaitement cette problématique :
Exemple 1 : Glisser-Déposer des éléments d’une page
Ce mode d’interaction très dynamique et spectaculaire renvoie à deux analogies marquantes qui suffisent à le rendre populaire : celle de la vie quotidienne (« je prends des aliments dans un rayon et les mets dans mon caddie ») et celle de la bureautique depuis l’apparition du Macintosh en 1984.
Les +
Plus de contrôle, bonne compatibilité avec d’autres contextes et plaisir d’usage.
Les précautions à prendre
- S’assurer de la pertinence de l’interaction riche pour l’exécution des tâches,
- Proposer des éléments forts d’incitation, de guidage et de transition pour comprendre comment ça marche et prévenir les erreurs.
- Donner du feedback sur l’action effectuée
Illustrations
- Temps 1
Temps 3
Exemple 2 : Communication asynchrone avec rechargement partiel et silencieux
C’est l’un des premiers et grands points forts d’Ajax.
Il permet de se focaliser sur des zones ciblées tout en évitant le rechargement complet de la page.
Les +
Plaisir d’usage, mais aussi plus d’interactivité, plus de fluidité et un retour d’informations en temps réel (notamment en prévention des erreurs)
Les précautions à prendre
- Conserver la fluidité
- Donner un retour (feedback) sur l’action effectuée (notamment d’un point de vue visuel)
Illustrations
Feedback... Feedback
Ajout d'un item
RIA, au service de bonnes pratiques ergonomiques reconnues…
L’auto complétion (l’utilisateur commence à taper quelques lettres et le système le guide alors dans sa recherche) et la validation à la volée de champs de formulaires en sont les parfaites illustrations. Outre de réels bénéfices en termes d’utilité, de productivité et de confort, ces deux techniques exploitent admirablement des critères ergonomiques majeurs, tels que la prévention des erreurs, le guidage et le feedback immédiat.
Validation à la volée
Enfin d’autres composants riches (issus de technologies variées) deviennent de véritables atouts pour la conception des interfaces utilisateurs. Les outils de manipulation directe, d’affichage contextuel, les techniques d’affichage dynamique (accordéons, panels, fenêtres secondaires, menus riches, carrousel, zoom, etc.) aux effets toujours plus variés (Lightbox…) viennent enrichir chaque jour davantage l’arsenal des concepteurs d’interface …
Effet LightBox: trés efficace au quotidien !
pour des produits UTILES et toujours PLUS UTILISABLES (c’est-à-dire efficaces, efficients et satisfaisants !)
Posté par jc-Qualitystreet le 21 octobre 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.
Gestion des erreurs : en quoi ça consiste ?
C’est protéger l’utilisateur des erreurs potentielles et les gérer quand elles se produisent (corriger ou aider à corriger). Prévention et correction vont donc de paire.
Indiquer où se trouve l'erreur ... vous voyez ?
Ce critère concerne la capacité du système à proposer à l’utilisateur tous les éléments nécessaires et suffisants pour lui permettre de ne pas commettre d’erreurs (guidage, assistance, simplicité de l’interface …). Il concerne aussi ses capacités de contrôle (côté client et/ou côté serveur) et de réponse à une erreur détectée :
- Indiquer clairement qu’une erreur s’est produite
- Montrer quels champs sont en erreur
- Conserver les éléments saisis par l’utilisateur
- Afficher un message d’erreur qui permet à l’utilisateur de corriger son erreur ou de revenir sur les bons rails
Trés Bon exemple - Recap & Inline
Quelques exemples de recommandations.
Prévention :
- Distinguer les champs obligatoires des champs facultatifs
- Afficher une demande de confirmation pour les actions potentiellement dangereuses irréversibles (bref fortement impact antes)
- Limiter les options et possibilités de saisie au strict nécessaire
- Indiquer le format de saisie attendu
Gestion des erreurs
- Proposer à la fois un récap. des erreurs en haut de page, et indiquer précisément et visuellement la localisation de l’erreur (indicateur et Tip associé) sur chaque champ concerné au sein du formulaire (RECAP + INLINE)
- Présenter les messages d’erreur INLINE directement sans qu’ils ne nécessitent d’efforts supplémentaires de la part des utilisateurs pour les afficher
- Après avoir vérifié la donnée corrigée (si c’est envisageable), afficher un indicateur positif (Coche verte, Bordure Verte…)
Messages d’erreurs
- Afficher les messages d’erreur les plus concis possible (tout en restant précis)
- Proposer autant que possible des messages d’erreur comportant les actions correctrices que peut engager l’utilisateur
- Rédiger les messages d’erreur dans le langage (et la langue !) de l’utilisateur,
- Indiquer le plus précisément possible la cause de l’erreur (ex : « Votre adresse email est incomplète » ; « Votre adresse email comporte un caractère non autorisé » ; « Votre adresse email doit inclure le signe @ »)
- Proposer des messages d’erreur simples et compréhensibles, directifs mais non agressifs ni autoritaires
- Eviter les fautes d’orthographe dans vos propres messages d’erreur
Mauvaises pratiques
Exemple 1 :
A priori on en trouve de moins en moins... et HEUREUSEMENT !
Exemple 2 :
Un long Recap peu lisible et PAS d'INDICATION INLINE
Exemple 3:
Toutes les qualités d'un MAUVAIS message d'erreur :)
Exemple 4:
Compliqué
Quelques bons exemples … so GOOD !
Bonne pratique (Wishlistr) :
Sobre et efficace: la cause de l'erreur et des possibilités de correction. Le critère "Distinction entre items" est bien exploité.
Bonne pratique (TypePad) :
Temps 1
Temps2
Temps 3
Temps 4 - Les 4 temps de la gestion des erreurs. Un accompagnement au TOP !
Bonne pratique (Ticket Trunck) :
Prévention : ? tip accessible par l'utilisateur
Bonne pratique (Pages jaunes):
En terme de prévention et d'accompagnement c'est pas mal !
Bonne pratique :
Une page 404 informative et efficace
Bonne pratique (Microsoft Office) :
Toujours la possibilité d'annuler... pour corriger l'erreur !
Bonne pratique (Apple Store) :
Apple c'est élégant !
Bonne pratique (Ebay) :
Inline : Signes et textes visibles
Bonne pratique (Remember the Milk) :
Picnik et ses contrôles en Ajax: Efficace !
Et le meilleur pour la fin … Bonne pratique (live from Berlin):
Et pour terminer ! Prévention et Incitation. Trop forts ces Berlinois, ils savent vous motiver 
- Neue Museum
Posté par jc-Qualitystreet le 21 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, 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.
Concision : en quoi ça consiste ?
C’est l’art d’aller à l’essentiel, de garantir la simplicité de l’interface et la pertinence des fonctionnalités. Concision et simplicité sont intimement liées…
Ce critère concerne la capacité du système à limiter les efforts de l’utilisateur en termes d’action, de perception ou encore de mémorisation. L’efficience, dont il s’agit ici, est un enjeu fort et une dimension clé de l‘utilisabilité : l’interface doit en effet permettre à l’utilisateur d’atteindre les buts qu’il se fixe en un minimum de temps, avec un minimum d’efforts …
Passionate Users - http://headrush.typepad.com/
La concision et la simplicité vont donc se jouer tant au niveau des fonctionnalités qu’en terme de design d’interface : « LESS IS MORE !»
Quelques exemples de recommandations
- Limiter les étapes par lesquelles doivent passer les utilisateurs pour effectuer leur tâche
- Hiérarchiser l’importance de chaque élément présent afin de rendre accessible en haut de page les informations et liens les plus important
- Limiter le nombre d’éléments de la barre de navigation
- Proposer des valeurs par défaut quand c’est possible
- Éliminer les éléments inutiles et tout bruit visuel
- Utiliser des libellés clairs, concis et non tronqués dans les formulaires
- Ne pas dépasser 100 éléments contenus dans la liste (50 est une borne plus réaliste). Au delà de 100 éléments, concevoir une page de recherche intermédiaire
- Éviter les textes qui clignotent ou qui défilent
- Limiter la taille des pages à trois écrans en résolution 1024×768
- N’afficher un texte d’instructions que si c’est nécessaire. S’il est affiché, utiliser un format court (sur 1 ou 2 lignes) afin d’en faciliter sa lecture et sa compréhension
Mauvaises pratiques
Exemple 1 :
Longues longues les instructions !
Exemple 2 :
Exemple 3:
Pourquoi ne pas simplifier dans un premier temps ?
Exemple 4:
Long le lien ! (source : Ergolab)
Quelques bons exemples … so GOOD !
Bonne pratique (Zara) :
Nouvelle boutique: une fiche produit sobre, efficace et des fonctions d'Ajout au panier et de commandes bien pensées (actions minimales)
"Passer commande" apparait aussitôt à proximité: facile et incitatif
Bonne pratique (Google, évidemment !) :
Google Chrome & Google Search : un navigateur, un moteur et des interfaces au service de la simplicité
Le plus simple ?
Bonne pratique (Amazon) :
Achart en 1 clic: Actions minimales...
Bonne pratique (Flickr):
Sobre et efficace
Posté par jc-Qualitystreet le 3 décembre 2009
Le rôle d’un portail d’entreprise est de fournir un point d’interaction unique et homogène à toutes les applications du Système d’information.
Aujourd’hui le portail d’entreprise doit répondre à de nouvelles exigences … mais seule une conception modulaire peut les satisfaire et garantir une expérience utilisateur riche et réussie.
La modularité se mesure dans la capacité qu’ont les composants du portail d’entreprise d’être séparés et recombinés, tant d’un point de vue fonctionnel qu’ergonomique. Elle confère au portail à la fois simplicité, cohérence, flexibilité et évolutivité, attributs attendus des portails nouvelle génération.
Certes, la conception ergonomique et fonctionnelle d’un portail d’entreprise reste avant tout centrée sur l’activité des utilisateurs finaux, mais se transforme, dans une approche hautement modulaire, en un véritable jeu de construction hiérarchisé et fondé à la fois sur un système de BLOCS et de CONNECTEURS.
- Portail d’entreprise et conception modulaire
DES BLOCS …
Les blocs sont de taille différente et intègrent en leur sein contenus et fonctionnalités.
Unité de base du système et intégré à la page Web, le bloc simple est l’élément dont l’utilisateur final est le plus familier. De hauteur et de largeurs variées, il se découpe en trois zones et possède :
- une zone d’en tête «Header» laissant apparaître un titre et diverses fonctionnalités, le plus souvent de contrôle du bloc (maximiser, réduire, fermer, afficher, masquer …)
- une zone centrale composée d’une grande variété de contenus (texte, tableaux, graphiques, vidéos, cartes interactive, et widgets en tout genre)
- une zone Footer, facultative, dont le traitement visuel et fonctionnel diffère très largement selon les contextes.
Les blocs simples peuvent être ou non regroupés (en Vue et/ ou en Groupe de blocs ).
Leur association donnera ensuite naissance aux pages web, qui elles-mêmes associées, constitueront les rubriques qui au final formeront le PORTAIL D’ENTREPRISE (BLOC le plus élaboré).
ET DES CONNECTEURS
Les connecteurs permettent quant à eux d’agir et de lier les blocs entre eux. On peut les regrouper pour l’essentiel en trois catégories:
- Éléments de contrôle et d’interface : Il s’agit d’actions portant sur le bloc lui même (maximiser, réduire, fermer, désactiver et d’autres actions plus évoluées relatives à l’apparence et au positionnement), de fonctionnalités de confort (imprimer, télécharger, envoyer à un ami, créer un PDF…), de paramètres d’affichage du contenu, depuis le nombre d’items à afficher jusqu’au sélecteur de date et de produits
- Éléments de navigation : Il s’agit essentiellement des barres de navigation principale et secondaire permettant de naviguer de rubriques en rubriques et de pages en page au sein de l’arborescence. Les items de la zone « utilitaires » (affichés le plus souvent en haut de page) relèvent de cette catégorie, tout comme la navigation contextuelle (entre pages et / ou blocs), les onglets intrapage, et les différentes vues d’une même page…
- Éléments sociaux et collaboratifs : Il s’agit de fonctionnalités permettant d’engager des utilisateurs avec d’autres autour d’une thématique donnée affichée par exemple sur un bloc simple (annoter, commenter, tagger, voter, recommander…)
Bref, choisissez, déclinez et arrangez vos blocs, liez-les par les connecteurs les plus appropriés, et surtout AMUSEZ-VOUS !
Posté par jc-Qualitystreet le 22 septembre 2009
La situation de travail se définit comme le contexte concret où les hommes réalisent une production matérielle ou immatérielle, dans des conditions de travail et de sécurité données. Manuelles, outillées, désormais informatisées et mobiles, les situations de travail n’ont cessé d’évoluer …
Dernier stade de cette évolution, les situations de travail informatisées, mettent en relation l’individu et un système informatique (ordinateur) pour la réalisation d’une tâche. .
Comment comprendre les situations de travail informatisées ?
Appuyez-vous sur ce modèle …
Et concrétement:
- Etudier de manière approfondie l’activité des utilisateurs (le cœur de la situation de travail) et les processus métiers dans laquelle elle s’exécute
- Etudier précisément chaque déterminant de l’activité, avec une attention toute particulière sur les Interfaces Utilisateurs
- Mesurer les effets de la situation de travail à la fois sur l’utilisateur et l’entreprise
Le modèle décortiqué
L’activité de l’utilisateur a trois composantes :
- Physiques (vision, audition, mobilité)
- Intellectuelles (mettant en jeu divers processus cognitifs: résolution de problème, prise de décision, mémorisation, apprentissage…)
- Sociales et de coopération (communication, collaboration, coordination …)
Elle a aussi plusieurs déterminants :
- Le poste de travail et interfaces Utilisateur (dans un contexte Business to Employee, c’est par exemple le Portail d’entreprise dont le rôle est d’instrumenter l’activité de l’utilisateur autour des processus métier de l’entreprise)
- L’organisation du travail (situation socio-économique de l’entreprise, durée du travail, horaires, rythmes et cadences de travail, organisation des équipes, hiérarchie …)
- L’environnement de travail (espace de travail, ambiances physiques comme l’éclairement, le bruit, flux de personnes…)
- Les contenus et objectifs du travail («la tâche» à réaliser et ses attributs, services à assurer, contrôles à effectuer, consignes, modes opératoires…)
- Les caractéristiques de l’utilisateur (âge, sexe, qualification, formation, expérience, savoirs, savoir-faire, savoir-être, ancienneté, statut, handicaps, motivation …)
Une fois réalisée, l’activité aura des effets à la fois sur :
- l’utilisateur (notamment en termes de charge de travail, de connaissances, compétences, de satisfaction …)
- l’entreprise, principalement en terme de productivité.
Posté par jc-QualityStreet le 12 octobre 2008
T-Mobile a mis en place un émulateur vous permettant d’explorer de manière interactive et réaliste l’interface utilisateur du G1…
Lire la suite
