L’approche design Studio n’est pas révolutionnaire mais elle revient aujourd’hui sur le devant de la scène, notamment grâce à des configurations type SCRUM qui mettent en avant l’Equipe, le Collectif et qui donne au Design Studio des conditions ultra favorables pour être efficace.
Sketching: Round 1 Travail individuel au sein d'un COLLECTIF
Les + que j’ai pu observer
Cohésion de l’Equipe
Esprit Agile
Grand nombre d’options en un minimum de temps
Source de diversité et d’innovation
Résolution de problème efficace
Format impliquant et engageant (réflexion individuelle puis construction & décision collective)
Le Design Studio: Comment ça marche?
Cette approche ultra collaborative se déroule en 4 temps dans une logique itérative alternant divergence - convergence.
Un agenda simple
Temps 0 : Ouverture: contexte, Vision produit, Personas, Elements de Backlog ou Probléme à résoudre
Temps 1: Itération 1 avec Sketching Solo (rapide, 6 écrans ou enchaînement en 8 minutes), puis PITCH de chaque personne à l’équipe (3 min) pour défendre et présenter ses solutions puis CRITIQUE (constructive) de l’équipe (2 min)
Temps 2: Itération 2 (le REMIX), sur la base de la 1ere itération. On tient compte des options et critiques des autres avec Sketching Solo (rapide, 6 écrans ou enchaînement en 8 minutes), puis PITCH de chaque personne à l’équipe (3 min) pour défendre et présenter ses solutions puis CRITIQUE de l’équipe (2 min)
Temps 3 : Itération 3: ON CONSTRUIT COLLECTIVEMENT LA SOLUTION qui GAGNE (45 - 60 min) puis on la présente à d’autres si nécessaire
Pas mal d'options; 6 écrans * 6 personnes * 2 tours ! + 1 version finale
Temps 4 : Cloture
Au démarrage des projets, on se lance dans des design studio de 3, 4 heures qui vont impliquer le PLUS DE PERSONNES POSSIBLES (spécialistes de l’interface, développeurs, testeurs, représentants métier, clients, utilisateurs…).
Le design d’interface, via SKETCHING, est désormais l’affaire de tous.
Derniers Conseils
Le sketching est juste une question de pratique, alors entraînez-vous!
C’est un travail de conception
Ne vous laissez pas déstabiliser par certains spécialistes considérant encore qu’eux seuls détiennent cette expertise sur les écrans et leur enchaînement
Appuyez-vous sur le collectif et le format Design Studio pour définir votre Vision UX ou la posture ergonomique de votre produit: faites-vous confiance et faites confiance au format pour vous donner les premières preuves que ça marche!!
Pensez à intégrer des mini-Design Studio tout au long de vos développements, au cours des sprints, dans les Backlog Refinement ou des workshops distincts, plus courts sur des problématiques précises…
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 moncaddie ») 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 !)
Amélie Boucher est déjà l’auteur d’Ergonomie Web (sorti en 2007), un Must Have pour toute personne s’intéressant à l’ergonomie informatique.
Plutôt complémentaire avec le précédent, Ergonomie Web Illustrée se consacre cette fois-ci aux Etudes de Cas. L’auteur passe ainsi prés de 60 sites web (tous secteurs) à la loupe, critiqués sous l’angle Ergonomie Web, à la fois d’un point de vue expert et du point de vue des utilisateurs (sessions de tests utilisateurs).
Pour en faciliter son exploration, l’ouvrage est structuré autour de 7 thématiques (Pages d’accueil, Pages de liste, Pages de contenu, Formulaires, Outils en ligne, Emails & Newletters, et les incontournables applications iPhone), clairement les problématiques actuelles du marketing web.
Les évaluations de chaque site permettent de glisser en douceur de bons points théoriques (détaillés dans le lexique que je vous recommande tout particulièrement). Exemple page 69 avec la Loi de Fitts:
“La Loi de Fitts énonce qu’une cible est d’autant plus rapide à atteindre qu’elle est proche ou grande. Une des recommandations consiste donc à augmenter la taille des éléments cliquables. C’est d’autant plus important que l’élément sera cliqué de nombreuses fois dans une session d’interaction. Rendez-vous dans le lexique pour découvrir cette loi plus en détails”
Les recommandations proposées sont bien argumentées. L’approche résolument visuelle et synthétique est efficace. Il est évident que l’ensemble des professionnels du web y trouveront leur compte, consultants ou non…
La posture du livre, apprentissage par l’exemple & retours terrain, fait sa force. Ça marche… même si cela donne à l’ouvrage d’Amélie un côté « éphémère », tant l’univers du marketing interactif évolue vite. Cela dit, je salue l’effort ! Amélie Boucher a fait une nouvelle fois un sacré boulot.
Mon conseil de lecture : jetez un œil sur le site web abordé, accomplissez deux ou trois scénarios de navigation, réalisez vous-même une rapide évaluation puis lisez ce qu’en dit Amélie.
SOYEZ ACTEUR DE VOTRE APPRENTISSAGE !
Retrouvez d’autres références sur l’Ergonomie, et bien d’autres domaines dans la rubrique “Quelques livres“.
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.
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. 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
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
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 c'est raté !
Autre mauvais exemple :
Autre mauvais exemple:
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)
Autre exemple:
Distinction des rubriques par couleurs
Autre exemple:
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 Eba
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.
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
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
Autre exemple
Une lecture très difficile !!!
Quelques bons exemples … so GOOD !
Tout est dit !
Autre exemple:
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
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.
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
É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 »
(45 - 60 min) puis on la présente à d’autres si nécessaire
