www.archive-net-2013.com » NET » E » ERGOLAB

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 258 . Archive date: 2013-09.

  • Title: Note n°5 – Ergolab, ergonomie sites web
    Descriptive info: bloc notes.. note n°5/12.. TAGS :.. Navigation.. n 5.. Liste des notes.. note précédente.. n°5 /.. 12.. note suivante.. n°5.. [01.. Historique de navigation 3 en 1 pour Yahoo! Food.. Source :.. http://food.. yahoo.. com.. Un historique de navigation très bien interfacé chez Yahoo! Food, et particulièrement intéressant dans ce type de sites, où l'on consulte un grand nombre de pages, et  ...   c'est une fonctionnalité que l'on retrouve dans de nombreux sites, et de plus en plus.. Cet historique chez Yahoo! Food a cependant cet avantage de présenter en très peu d'espace écran un grand nombre d'entrées.. À voir dans le même genre :.. » Votre historique récent sur.. Amazon.. » Les produits vus sur.. Pimkie.. » Un autre historique 3 en 1 sur.. Kelkoo..

    Original link path: /bloc-notes/52.php
    Open archive

  • Title: Note n°4 – Ergolab, ergonomie sites web
    Descriptive info: note n°4/12.. Terminologies.. n 4.. n°4 /.. n°4.. [30.. Follow this topic sur CNN, ou le RSS pour les nuls.. www.. cnn.. Un des plus grands défis du RSS reste son utilisation par le grand public, en tout cas par un public moins restreint que celui des "technophiles".. Dans cet objectif, on se trouve confronté à la difficulté de.. traduire correctement l'utilité du RSS.. pour les visiteurs d'un site web : si l'on arrive à dire clairement  ...   quoi il retourne et, ce faisant, d'avoir envie de recourir à ce système.. Le nouveau site de CNN y parvient particulièrement bien, en nommant cette fonctionnalité "Follow this topic".. En.. associant ce label et l'icône conventionnelle.. représentant le RSS, CNN s'assure ainsi de pousser la fonctionnalité pour les gens qui ne connaissent pas le RSS (grâce au libellé très explicite, orienté action), et de faciliter son repérage pour les habitués du RSS (grâce à l'emploi de l'icône)..

    Original link path: /bloc-notes/4.php
    Open archive

  • Title: Note n°3 – Ergolab, ergonomie sites web
    Descriptive info: note n°3/12.. Aide.. Formulaires.. n 3.. n°3 /.. n°3.. [28.. Aide contextuelle onfocus chez Yahoo! Mail.. fr.. Dans le formulaire de création d'un compte Yahoo,.. certaines aides apparaissent de manière contextuelle.. lorsque l'utilisateur clique dans un champ.. Yahoo se sert de ce procédé pour afficher des contenus d'aide, mais surtout des.. éléments d'explication et de rassurance.. sur, notamment, la nécessité de demander certaines informations qui peuvent paraître personnelles (de type: code postal, âge), ou saugrenues (de type retaper le mot de passe).. En effet, ce type d'information est importante, mais pas capitale.. On peut donc se suffire de l'afficher uniquement suite à l'action de l'utilisateur.. On comprend bien l'utilité de ce type d'aide au vu du dernier champ illustré ci-contre: il est tout à fait remarquable de pouvoir fournir une explication aux internautes peu avertis concernant le captcha.. Toutefois, la solution d'interface adoptée permet de.. fournir cette explication précisément à l'instant où l'internaute en a besoin.. ,  ...   formulaire de.. création d'un compte Hotmail.. à voir aussi sur Ergolab.. [24.. 07.. 2004].. L ergonomie dans la conception d un formulaire.. Le formulaire est l'un des moyens pour l'utilisateur d'envoyer des données, alors que son comportement classique sur le web consiste plutôt à recevoir des informations.. Cette notion entraîne des problématiques d'ergonomie autres.. Defensive Design for the Web - 37signals.. Téléchargement gratuit de "Bulletproof forms", le Chapitre 4 du livre.. defensive design for the web.. , proposé par l'équipe de 37signals.. Ce chapitre traite de l'utilisabilité des formulaires au travers de 8 recommandations argumentées et illustrées.. (Cliquer sur l'onglet Sample content).. Best practices for form design.. Un formidable document préparé par Luke Wroblewski (auteur de.. Site-Seeing: A Visual.. Approach to Web Usability.. ), et pas moins de 112 pages entièrement consacrées à l'ergonomie des formulaires, et réparties en 4 grands chapitres : Why Does Form Design Matter, Information, Interaction, et Feedback.. Un must.. (Lien direct vers pdf)..

    Original link path: /bloc-notes/32.php
    Open archive
  •  

  • Title: Aide - Ergolab, ergonomie sites web
    Descriptive info: TAG : Aide.. Voir tous les tags.. tags.. Aide.. Voir ce tag dans :.. les articles.. les chroniques de livres.. les liens.. le bloc-notes.. afficher.. liste des tags.. 1 ressource(s).. portent le tag.. "Aide".. [note].. note n 3.. Lire la note.. Voir tous les tags du site Ergolab.. dernier article.. Les interfaces à base de glisser -  ...   Qu'en est-il vraiment du côté utilisateur, et qu'en dit l'ergonomie? Cet article liste chaque point d'accroche des interfaces de drag drop, et émet pour chacun des recommandations, tant du point de vue de l'utilité que de l'utilisabilité de ce mode d'interaction.. dernière note.. [05.. Lorsqu une fiche produit sort de sa page.. Lire la note n°12.. dernière chronique..

    Original link path: /tags/tag.php?id=52
    Open archive

  • Title: Note n°2 – Ergolab, ergonomie sites web
    Descriptive info: note n°2/12.. E-commerce.. n 2.. n°2 /.. n°2.. [22.. Le browse by size de Threadless.. threadless.. Un bel exemple de fonctionnalité pensée sur-mesure pour les utilisateurs, à retrouver sur le site de Threadless, site américain de vente en ligne de T-shirts et autres vêtements.. Les concepteurs du site montrent à leurs clients qu'ils les connaissent parfaitement, en inventant après que le site ait vécu quelques temps une fonctionnalité "Browze by size".. Autrement dit, au lieu de faire entrer leurs clients par les produits qu'ils proposent (stratégie de type "Je choisis un T-Shirt qui me plaît, puis ma taille, la couleur que je préfère, etc.. ), ils leur permettent d'.. entrer par besoin.. (stratégie de type "Je choisis un T-Shirt qui me plaît, puis ma taille, la couleur que je préfère, etc.. ).. En effet, ces besoins dans le contexte de l'achat d'un T-Shirt sont.. souvent incontournables.. : si je fais du M Fille, il m'est complètement impossible d'acheter du XS ou du XL.. Or, toutes les tailles ne sont pas disponibles pour tous les T-Shirts.. En pensant  ...   mon expérience d'achat), soit je quitte le site pour n'avoir pas trouvé de T-Shirt qui me plaisait suffisamment, soit encore je quitte le site suite à trop d'essais infructueux (alors qu'il y a peut-être des T-Shirts qui me plairaient disponibles dans ma taille, mais que je suis lasse d'essayer et d'être déçue).. Grâce à ce procédé, Threadless n'implique pas l'internaute dans l'envie de quelque chose qu'il ne pourra pas obtenir.. En passant, rappelons que Threadless est déjà.. un des champions de l'implication utilisateur.. , via des fonctions de type "request reprint", "envoyez des photos de vous avec votre t-shirt", etc.. Un seul point négatif donc, dans l'usage de cette fonctionnalité :.. Lorsque j'ai sélectionné les T-Shirts M Fille, on me l'indique dans le titre de page, mais je n'ai.. aucun indicateur de ce filtre d'affichage.. dans la colonne de droite, celle-là même qui m'a servi à déclarer mon choix.. À voir dans le même genre :.. » Le "shop by size" de.. Old Navy.. » Le "archives by color" de.. Web creme.. » Le "narrow by" de.. Endless..

    Original link path: /bloc-notes/2.php
    Open archive

  • Title: Call to action - Ergolab, ergonomie sites web
    Descriptive info: TAG : Call to action.. Call to action.. "Call to action".. note n 1.. Buy now, mais encore ? Cloggs rénove le call to action.. Call to action..

    Original link path: /tags/tag.php?id=57
    Open archive

  • Title: Les 20 notes les plus lues - Ergolab, ergonomie sites web
    Descriptive info: les 20 notes les plus lues.. les notes les plus lues.. Les notes rangées par date.. 1.. 2.. [12.. 05.. 2009].. Double saisie temporisée, à voir chez Picnik.. Lire la note n°11.. Interfaces riches.. 3.. [04.. 12.. Acrobat.. com et le message d erreur du futur.. Lire la note n°10.. Animations.. Gestion des erreurs.. 4.. Lire la note n°3.. 5.. [07.. Le filtre produit Prisjakt  ...   articles sur LeMonde.. Lire la note n°9.. 7.. [14.. View a man.. par American Apparel.. Lire la note n°7.. 8.. 03.. Allociné calcule pour vous.. Lire la note n°8.. Utilité.. 9.. Lire la note n°2.. 10.. Lire la note n°5.. 11.. Lire la note n°4.. [17.. Lire la note n°1.. notes les plus lues.. Voir les 20 notes les plus lues.. une note au hasard..

    Original link path: /bloc-notes/notes-les-plus-lues.php
    Open archive

  • Title: Newsletter - Confirmation de désinscription - Ergolab, ergonomie web et logiciel
    Descriptive info: Entrez votre adresse e-mail pour être informé de l'ajout de nouveaux contenus :.. newsletter : désinscription.. Entrez votre e-mail ci-dessous pour vous désinscrire.. newsletter - confirmation de désinscription.. Votre adresse e-mail.. les dernières newsletters.. Pour vous faire une idée du type d'infos que nous envoyons dans nos newsletters, n'hésitez pas à consulter les dernières !.. la derniere newsletter.. fil rss.. Ergolab vous propose aussi de vous tenir au courant via son fil RSS !.. S'abonner au fil rss..

    Original link path: /newsletter/page_desinscription.php
    Open archive

  • Title: Drag & Drop - Ergolab, ergonomie sites web
    Descriptive info: TAG : Drag Drop.. Drag Drop.. "Drag Drop".. [article].. Lire l article.. Drag Drop..

    Original link path: /tags/tag.php?id=49
    Open archive

  • Title: Quelle ergonomie pour le drag & drop ?
    Descriptive info: 02 Novembre 2008.. Quelle ergonomie pour le drag & drop ?.. Introduction.. Le drag drop doit avoir une réelle utilité, augmenter l'efficience.. La possibilité de drag drop doit être visible.. La destination doit être compréhensible et visible.. Le drag drop doit être facile.. Le déplacement doit être visible.. L'effet du drag drop doit être visible.. Conclusion.. Avec la présence de plus en plus marquée des interfaces riches sur le web, on observe le transfert de modes d'interaction à l'origine réservés aux systèmes d'exploitation ou au monde logiciel.. C'est le cas du drag drop (en français, glisser - déposer).. Dans ce type d'interfaces,.. l'utilisateur saisit un objet, puis le déplace pour l'amener à un autre endroit.. Nous présenterons dans cet article les caractéristiques du drag drop, ses avantages et inconvénients, mais surtout comment répondre à ces derniers pour profiter des promesses de ce mode d'interaction.. Le propos de cet article est de souligner que.. le drag drop ne doit être employé que s'il est utile.. pour l'internaute, et non parce qu'il est possible de le faire techniquement.. De plus,.. une fois qu'il est présent, de nombreuses règles sont à appliquer pour qu'il soit utilisable.. Notre réflexion intègre des explications et exemples issus du monde logiciel ou système, dans l'optique de questionner son utilité et son utilisabilité dans des interfaces web.. La limite entre ces différents mondes étant parfois très fine, il paraît essentiel de souligner la manière dont le drag drop peut être utilisé à plus ou moins bon escient selon le contexte.. Introduction.. Au quotidien, nous utilisons énormément le drag and drop, sans forcément nous en rendre compte.. C'est surtout le cas dans nos systèmes d'exploitation : déplacement de fichiers d'une fenêtre à une autre, redimensionnement de colonnes, éjection d'un DVD, etc.. C'est aussi le cas dans de nombreux logiciels : glisser - déposer de blocs de textes dans un traitement de texte, glisser - déposer des fichiers pour les télécharger dans un logiciel de ftp, ré-organisation des palettes dans un logiciel graphique, etc.. Si l'on revient aux basiques, déplacer des objets dans des applications de dessin vectoriel, de mise en page ou de présentation, c'est aussi effectuer une action de drag drop.. Ce type d'interface relève fortement de la.. manipulation directe.. : on agit directement sur l'objet que l'on souhaite traiter, sans passer par un intermédiaire symbolisant l'action que l'on souhaite effectuer sur cet objet.. Mayhew dit à ce propose que dans ce type de mode d'interaction, "au lieu de le dire, les utilisateurs le font, simplement" (.. instead of "saying it", users simply "do it".. , Mayhew, 1992, cf.. lectures complémentaires).. Déplacer une image dans un dossier, déplacer un paragraphe de texte à un autre endroit de la page, uploader un fichier dans un logiciel de FTP, sont autant d'actions qui peuvent être effectuées par glisser - déposer.. Il paraît logique de profiter du fait que les utilisateurs familiers avec l'informatique connaissent ce type de procédé.. En effet, on peut ainsi observer des.. courbes d'apprentissage très courtes.. (étant donné que je sais exécuter le geste moteur sous-jacent au drag drop, il suffit presque que je comprenne que l'on peut glisser - déposer des éléments pour avoir appris).. Encore faut-il recourir au drag drop de manière réfléchie.. Il existe de nombreux contextes dans lesquels le drag drop devient un.. réel outil d'optimisation des interactions.. Comparez par exemple une interface d'ajout de fichiers attachés dans Gmail, et la même interface dans Windows Mail :.. Exemple d'attachement de fichiers dans un e-mail sous Gmail : je joins mes 3 photos 1 à 1 (à noter: une extension Firefox existe qui permet de contourner ce système).. Exemple d'attachement de fichiers dans un e-mail sous Windows Mail : je joins mes 3 photos en 1 seule action.. Il est indéniable que le drag drop a ici de grands bénéfices, surtout dans le cadre de multi-attachements de fichiers.. Son utilisation demande toutefois de modifier complètement la procédure mentale consistant à joindre un fichier : dans un cas, l'utilisateur commence par déclarer l'action qu'il souhaite effectuer, dans l'autre il commence par l'objet qu'il souhaite joindre.. Remarquons que Windows Mail supporte à la fois l'entrée par l'action (« clic sur l'icône joindre un fichier - ouverture de la fenêtre d'exploration du système ») et l'entrée par l'objet / les objets à attacher (« ouverture d'une fenêtre d'exploration - glisser - déposer dans l'e-mail »).. Cet exemple vise à souligner que le drag drop peut faciliter la réalisation de certaines actions.. Cependant, il peut aussi la compliquer.. Tout dépend du contexte et des choix qui sont effectués concernant l'ergonomie de ces interfaces.. Whiteside al soulignent à cet égard que.. le seul choix d'un style de dialogue.. homme-machine (ex: le drag drop).. ne peut pas être le déterminant principal de l'utilisabilité.. d'une application.. Ainsi, de bons (ou mauvais) choix de conception peuvent contrecarrer les défauts (ou annuler les bénéfices) potentiels d'un style de dialogue (ref.. dans Mayhew, 1992, cf.. La suite de cet article détaille dans quels cas le drag drop s'avère le plus pertinent, et les bonnes pratiques à appliquer pour exploiter ses bénéfices.. Nous allons ainsi voir que 3 grandes dimensions sont capitales : utilité, visibilité et feedback.. Pour que le drag drop soit pertinent, encore faut-il qu'il aide l'internaute.. Or, on remarque que ce mode d'interaction est souvent utilisé comme un gadget dans les sites web.. Autrement dit, les responsables du site décident d'intégrer cette fonctionnalité parce qu'ils la trouvent "cool", "sexy", "innovante".. Dans ce genre de cas, on part d'une possibilité technique pour la plugger sur un site web, sans se soucier de son intérêt sur le site en question.. Le premier point à évaluer, c'est donc l'utilité du drag drop.. Il est indéniable que ce dernier permet, dans certains contextes, d'optimiser les interactions avec le site.. Cependant, il peut aussi les alourdir.. Sur le web, on distingue aujourd'hui.. 2 grandes types d'objectifs.. pour lesquels est utilisé le drag drop.. Le déplacement de l'objet est toujours nécessaire, puisqu'il appartient à la définition même du mode d'interaction (par "drag", on sous-entend forcément un déplacement).. Cependant, il est utilisé à des fins différentes :.. » Soit pour.. lancer une action.. sur un objet (ex.. ajout au panier).. Dans ce cas,.. le déplacement = un moyen pour lancer une action.. L'objet "référent" reste à son emplacement initial, mais il peut être dupliqué symboliquement.. » Soit pou.. r déplacer.. un objet (ex.. passage d'un groupe à un autre, ordonnancement de listes, etc.. Pour ce type d'objectifs,.. le déplacement = la finalité.. On n'a qu'une instance de chaque objet.. On remarque en général que.. le drag drop est particulièrement adapté pour supporter ces actions de pur déplacement.. d'un item.. Il est alors très utile puisqu'il mime parfaitement l'action désirée.. Le déplacement est par définition un type d'action pour lequel il semble logique de saisir l'objet pour l'amener ailleurs (comme dans le monde réel).. Illustrons par des exemples ces deux façons d'exploiter le glisser - déposer, et leurs implications en termes d'utilisabilité.. 1.. Exemple positif : efficience optimisée.. Commençons par une application positive, où le drag drop démontre toute son utilité en termes d'efficience utilisateur :.. La fonction de drag drop est très intéressante pour l'ordonnancement de listes.. Ici, un exemple sur l'interface de BaseCamp, où les items peuvent être glissés - déposés aux emplacements désirés.. Ce procédé permet d'optimiser l'action d'ordonnancement au regard d'un comportement html plus classique consistant à indiquer un chiffre correspondant à l'emplacement souhaité, ou à déclarer l'élément à déplacer, un emplacement de destination, puis à lancer l'action en cliquant sur un bouton.. basecamp.. Comme c'est le cas dans cet exemple, le drag drop est intéressant lorsqu'il permet à l'utilisateur d'.. atteindre plus simplement ou plus rapidement son objectif.. Attention, le simple fait d'utiliser le drag drop pour faciliter des actions de déplacement d'objets n'implique pas que ce soit le mode d'interaction le plus adapté.. L.. e niveau d'efficience obtenu est en effet très dépendant de la visibilité directe de l'élément à déplacer, ainsi que de sa destination.. Passons à un exemple où le drag drop vient complexifier ou gêner l'atteinte des objectifs utilisateur.. 2.. Exemple négatif : efficience diminuée.. Les contextes où l'utilisation d'un système de drag drop est inappropriée sont nombreux sur le web.. C'est le cas dans l'exemple suivant, où le drag drop complique la réalisation de la tâche :.. La fonction de drag drop peut compliquer la réalisation d'une action.. Ici, un exemple sur l'ancienne interface du site de Free, où les manuels d'aide doivent être téléchargés en utilisant le glisser - déposer.. Ce procédé s'avère plus complexe qu'un clic sur un lien "Télécharger".. En effet, l'internaute doit d'abord comprendre le fonctionnement de l'interface en analysant la page et en lisant la légende.. Ensuite, il doit procéder au drag drop, ce qui n'est pas forcément évident pour tous les internautes et nécessite plus d'actions qu'un simple clic (cf.. schéma ci-dessous).. Source : ancien site.. free.. Dans le cas d'un système de glisser-déposer d'éléments uniques, voici ce que le style de dialogue implique par rapport à une interface plus classique :.. Décomposition de l'action effectuée en drag drop : clic sur l'objet, parcours de la distance objet / récepteur, dépôt de l'objet sur le récepteur.. Plus la distance objet / récepteur est longue, plus l'action est longue à effectuer, voire compliquée d'un point de vue moteur.. Avantage : l'interface est légère visuellement.. Décomposition de l'action effectuée via un bouton : clic sur le bouton.. Inconvénient.. : l'interface est plus lourde visuellement (il faut répéter le bouton autant de fois qu'il y a d'objets).. En fait, dans la plupart des exemples de lancement d'actions par un drag drop,.. on oublie l'efficience.. (clé de l'utilisabilité).. en ne réfléchissant qu'à l'efficacité.. (base de l'utilisabilité).. Certes, une interface d'ajout au panier me permet d'ajouter un article au panier, mais à quel coût utilisateur en termes de difficulté et de temps de réalisation ?.. Plus précisément, lorsque je ne peux pas effectuer de.. multi-sélection.. , il y a peu de chances que le drag drop soit plus efficient qu'un simple bouton d'action.. Lorsque la multi-sélection est possible, le drag drop a d'autant plus de chances d'optimiser l'efficience qu'il y a d'objets sélectionnés simultanément.. Cela explique que le drag drop a une plus grande vocation à être utilisé dans des.. interfaces à forte récurrence.. , que leurs utilisateurs utilisent fréquemment (c'est notamment le cas des logiciels web, des outils, des sites web "applicatifs"), dans lesquelles ils traitent beaucoup d'objets, et bien sûr uniquement.. lorsqu'il facilite la tâche.. Il semble que plus le web évolue, plus il se destine à accueillir un grand nombre de nos applications.. De nombreux sites web sont de véritables outils, et non seulement des "bases de connaissances" dans lesquelles on se contente de circuler.. Le drag drop peut alors être envisagé, mais avec les précautions qui s'imposent.. Pour conclure sur ce point, on considèrera que.. le drag drop est utile quand il permet à l'utilisateur d'être efficient.. Notons que si la fonctionnalité du drag drop est imposée, mais que vous remarquez qu'elle pose des problèmes d'efficience, il est nécessaire de.. la doubler par une alternative plus classique.. C'est par exemple ce que fait Panic pour l'ajout au panier :.. Sur le site de Panic, on peut ajouter un produit au panier soit par.. glisser - déposer, soit plus classiquement par clic sur un bouton.. Ainsi, on ne risque pas d'empêcher les internautes d'ajouter des produits à leur panier, ou de leur compliquer la tâche.. panic.. com/goods.. Pour finir, ce n'est pas parce que le système de drag drop.. peut.. augmenter l'efficience qu'il l'augmente effectivement.. Comme nous l'avons déjà évoqué,.. le style de dialogue n'est qu'un potentialisateur.. Ainsi, en fonction des choix d'interface, le drag drop peut être plus ou moins difficile à utiliser, et, de fait, augmenter ou diminuer l'efficience de l'internaute.. La suite de cet article s'attache donc à décortiquer les bonnes pratiques à mettre en place pour profiter des bénéfices du drag drop, lorsqu'on est certain que c'est le mode d'interaction adapté.. Certaines des fonctionnalités reposant sur le drag drop nous paraissent plus intuitives que d'autres.. Nous avons vu que les actions de déplacement sont celles pour lesquelles il semble le plus naturel de pouvoir glisser - déposer des objets.. Pour les autres types d'action, on peut optimiser l'interface pour aider l'internaute à prendre en main le système.. Il faut en effet ajouter aux critères inhérents à la fonction elle-même les.. choix d'interface, qui vont jouer sur le niveau d'opacité du drag drop.. pour l'utilisateur.. Les internautes ont besoin de deux connaissances afin d'avoir l'idée d'utiliser un système de glisser-déposer : savoir qu'ils peuvent glisser-déposer des objets, et savoir quels objets peuvent être glissés-déposés.. Les formats de présentation, terminologies et comportements au survol peuvent aider les internautes dans ce sens.. Il est capital de les optimiser, surtout lorsqu'on n'offre pas d'autre alternative que le drag drop pour réaliser l'action.. Savoir que l'on peut glisser-déposer des objets.. Un des défauts fréquents du drag drop est que les utilisateurs ne voient pas qu'il est possible.. Dans ce type de situation, on perd alors toute la puissance attendue de ce mode d'interaction, puisque  ...   l'utilisateur.. Information donnée avant l'action.. Les.. messages adossés aux récepteurs.. doivent aider dans ce sens.. On peut remarquer qu'ils sont en général plus efficaces ou immédiatement compréhensibles quand ils sont en deux parties, présentant à la fois l'action physique à effectuer et la conséquence qui s'ensuivra :.. Exemple : "déposer.. pour.. ajouter au panier".. Exemple sur Flickr : "Faites glisser des éléments ici.. les modifier par lot.. ".. Exemple sur Panic : "Drag any item here.. to.. add it to your cart.. Exemple sur Getty Images : "Drag and drop keywords from the left.. exclude the things you don't want.. Dans le cas où l'action ne se fait qu'a posteriori sur l'ensemble des objets contenus dans le récepteur, le.. design de ce récepteur.. peut aussi aider à comprendre la relation entre le groupe d'objets déposés, et une action qui peut être lancée sur l'ensemble.. C'est par exemple le cas pour la comparaison de véhicules sur le site de General Motors :.. Information donnée après l'action.. La conséquence du drag drop peut aussi être.. affichée en cours d'interaction.. , même si le message a alors.. moins d'impact.. Notamment, il.. ne peut pas suggérer.. de commencer à glisser un objet.. Ce type de message peut toutefois.. accompagner l'internaute dans ses actions de manière assez fine.. et pertinente.. Pour illustration, cet exemple sur le site du Coq Sportif :.. Sur le site du Coq Sportif, si je commence à glisser un de mes objets favoris hors du récepteur "mes favoris", comme si je voulais l'en sortir, on affiche une icône représentant un cœur brisé.. Cela a du sens, puisque les objets favoris sont indiqués par une icône de coeur.. On traduit donc symboliquement l'action qui est en train d'être menée par l'utilisateur.. La destination doit être visible.. Dans une interface utilisant le drag drop, on doit voir qu'un objet est déposable à un ou à plusieurs endroits.. De manière plus précise, on doit pouvoir accéder à deux types d'informations, selon le moment de l'interaction :.. » Savoir (à l'avance) où on peut déposer.. » Savoir si on peut dropper ce qu'on est en train de déplacer.. Savoir (à l'avance) où on peut déposer.. En général, dans les interfaces utilisant le drag drop pour déplacer des objets, la question de savoir où on peut déposer est peu importante.. Dans ce type de cas, les utilisateurs comprennent très vite où ils peuvent déposer des objets, de manière intuitive puisque la destination représente exactement l'endroit où ils veulent voir l'objet (exemples : déplacement de rdv dans un calendrier, ordonnancement de listes, etc.. Lorsque déposer un objet à un endroit n'est qu'un moyen de lancer une action (ex: ajout au panier), il est important de faire plus d'efforts en termes de guidage pour l'internaute.. En général, les.. jouent le rôle d'indicateurs.. Ils ont en effet d'abord pour fonction initiale d'indiquer l'endroit où les objets peuvent être déposés.. Même si le récepteur n'indique pas explicitement qu'il est une destination pour l'action de drag drop, il peut prendre une.. apparence particulière.. quand un objet est saisi.. , aidant à comprendre que les deux peuvent entrer en relation.. Sur le site de Virgin Mega, lorsque je commence à déplacer un article, le panier "clignote" pour indiquer son rôle de récepteur.. virginmega.. Notons qu'il faut.. éviter d'exagérer cette mise en avant des destinations.. , surtout lorsqu'elles sont multiples, car la charge mentale et visuelle peut alors être très gênante.. Savoir si on peut déposer ce qu'on est en train de déplacer.. Lorsque je suis en train de glisser un objet,.. toute zone survolée candidate au dépôt doit.. être highlightée.. Ce.. feedback visuel.. est très important, et permet à l'utilisateur d'utiliser le drag drop de manière plus confortable.. Indiquer la possibilité plutôt que l'interdiction.. Nous recommandons d'.. indiquer où un objet est déposable, bien plus qu'où il n'est pas déposable.. En effet, cette indication peut être mal interprétée par les utilisateurs.. Du reste, il n'en ont pas besoin.. En effet, à partir du moment où l'on indique les destinations permises, il va de soi que lorsque l'indicateur n'est pas affiché, c'est que l'on ne peut pas déposer l'objet.. Cette recommandation vise à.. limiter le nombre de signifiants.. pour alléger la charge mentale liée au traitement de l'action de glisser - déposer.. Elle est encore plus importante lorsque l'indicateur de « non-déposabilité » prête à confusion.. Regardez cet exemple d'une application Flex permettant de glisser des éléments d'une liste à une autre :.. Lorsque je survole une zone où je ne peux pas déposer mon item, une icône s'affiche.. Or, cette dernière indique conventionnellement la suppression, et m'interroge donc sur ce qui peut se passer si je lâche l'item à ce moment précis : Va-t-on supprimer l'item ?.. http://www.. adobe.. com/devnet/flex/quickstart/adding_drag_and_drop/#list.. Bonus : donner un aperçu de l'effet.. On peut optimiser le simple feedback visuel par une information plus précise.. Bien sûr, cela doit être réservé aux applications où cela a du sens.. La plupart du temps, cela consiste à donner un aperçu de ce que donnera l'interface si l'on procède au dépôt.. C'est notamment ce que font Netvibes et Flickr :.. Sur Netvibes, on me donne une indication précise de l'endroit où je peux dropper, mais aussi une représentation exacte de la "place" que prendra l'objet à cet endroit de l'écran.. netvibes.. Chez Flickr, on me montre 2 choses : un duplicata de l'image que je déplace, et une représentation transparente de son état "prévu" lorsque je l'aurais déposée : on m'indique ainsi l'endroit où va être placée mon image.. En prime, cela peut m'aider à comprendre que je n'ai pas besoin d'aller la mettre tout en haut, ce qui réduit la difficulté motrice et le temps d'exécution du glisser - déposer.. Le drag drop doit êt.. re facile.. Une des difficultés du drag drop réside dans le fait qu'il implique des actions motrices plus compliquées qu'un simple clic.. Cela touche les novices comme les plus expérimentés des utilisateurs, même s'ils n'éprouvent pas le même type de difficultés.. Si on rappelle la.. loi de Fitts.. , qui énonce qu'.. une cible est d'autant plus rapide à atteindre qu'elle est proche et grande.. , on peut alors trouver des moyens d'optimiser le drag drop.. Plus le récepteur est proche, plus le drag drop est facile.. Pour commencer, le drag drop sera d'autant plus facile que la destination sera proche de l'objet.. Sur le web, on recommande donc de.. positionner le récepteur dans un.. panneau flottant.. , qui vient se poser sur l'interface et reste au même endroit quelque soit la position du curseur dans la page.. Cela explique pourquoi le drag drop est plus facile dans l'exemple du site de Panic (panier toujours disponible en bas de l'écran) que dans celui de Virgin Mega (le panier, situé dans le header, disparaît si je scrolle dans la page).. On remarque d'ailleurs que lorsque le récepteur n'est pas directement disponible à l'écran, les utilisateurs hésitent à lancer une action de drag drop.. Faites-en l'expérience : effectuer une opération de drag drop dans un système d'exploitation est.. quelque chose qui se prépare.. : en effet, les deux espaces de travail (celui d'où je prends l'objet cible, et celui où je souhaite le déposer) doivent être.. visibles simultanément à l'écran.. , sans quoi il me sera impossible de procéder au glisser-déposer.. De micro-ajustements sont possibles (notamment dans le cas de hiérarchies de dossiers, où le survol d'un dossier peut permettre de l'ouvrir, pour déposer l'objet dans un sous-dossier.. C'est notamment le cas dans Outlook).. Cependant, ces occasions de contourner la nécessaire simultanéité du drag and drop sont rares.. Notons que quelques pistes de recherche explorent la voie d'un.. drag drop par étapes.. (sélection, pause, drop), pour limiter ces difficultés liées aux distances virtuelles entre point de départ et point d'arrivée.. Plus le récepteur est grand / flexible, plus le drag drop est facile.. La deuxième partie de la loi de Fitts nous aide à recommander de prévoir des zones de réception suffisamment grandes pour faciliter le drag drop.. 3.. Plus le récepteur est logique, plus le drag drop est facile.. De manière complémentaire, la zone de réception doit sembler naturelle à l'internaute.. Ci-dessous, un contre-exemple sur le site de Panic :.. Sur le site de Panic, le message indique "drag here", mais la véritable zone de réception est limitée à la flèche.. On induit donc l'utilisateur en erreur.. Il aurait été préférable de rendre l'ensemble de la zone (message + flèche) active.. En prime, cela aurait permis d'augmenter la taille de la zone de réception, respectant par là-même la seconde partie de la loi de Fitts.. 4.. Plus la zone préhensible est étendue / logique, plus le drag drop est facile.. Enfin, le drag drop sera d'autant plus facile que l'objet sera facilement préhensible.. Dans la plupart des cas, il faut donc veiller à prévoir que l'ensemble de l'objet puisse donner lieu à une action de saisie (et non uniquement une "poignée").. Une interface de drag and drop ne peut être réussie que si le système fournit un.. feedback informant l'utilisateur.. sur le fait.. qu'il est bien en train de déplacer.. un élément.. Cela permet à ce dernier d'éviter une erreur (du type "je crois déplacer un objet alors que je l'ai mal saisi, donc que je ne déplace rien"), d'avoir un retour en temps réel sur l'efficacité de son action de déplacement, et enfin de pouvoir contrôler avec précision son action en vue de la dépose de l'objet à sa destination.. Pour indiquer le fait qu'un élément est en train d'être déplacé, on peut recourir classiquement à deux types de représentations.. Représenter l'objet déplacé en tant que tel.. Lorsqu'on utilise ce procédé, l'objet peut être représenté sous plusieurs formes :.. » Le même objet en transparence.. , en tout cas de manière dégradée.. Cela permet de comprendre l'état « instable » de l'objet, et de continuer à avoir une vue de l'interface située en-dessous.. » Le même objet en plus petit.. , sous forme de vignettes.. C'est par exemple ce qu'utilise General Motors sur son site :.. La voiture en cours de déplacement est représentée par son duplicata en miniature.. Utiliser un représentant symbolique de l'objet.. L'objet.. peut aussi être représenté sous la forme d'un symbole.. Cela permet de limiter l'intrusion de l'objet déplacé dans l'interface de base, et la charge visuelle liée au déplacement de l'objet.. Tant que je n'ai pas relâché le bouton de la souris, l'objet reste à sa place initiale.. C'est par exemple le cas lorsqu'on utilise un filet horizontal pour représenter une ligne d'une liste, un rectangle pour représenter un bloc de texte en déplacement dans un traitement de texte, ou un chiffre pour représenter le nombre d'éléments en train d'être glissés :.. Sur l'application SFR Mes Contenus, les items en déplacement sont figurés par une incrémentation de chiffres.. Les éléments de départ ont une apparence particulière, soulignant leur caractère "sélectionné".. La dernière grande recommandation consiste à optimiser la visibilité de la conséquence du drag drop lorsqu'il a été réalisé.. Cette recommandation est valable pour les interfaces où le drag drop sert à déplacer une "instance" d'un élément (ex: ordonnancement d'une liste vs drag panier) plutôt qu'à déplacer un élément.. En effet, dans ce dernier cas, l'effet du drag drop est auto-explicite.. Pour souligner l'effet du drag drop, on doit utiliser soit un.. duplicata de l'objet.. , soit un.. représentant symbolique.. (une incrémentation de chiffres dans un micro-panier par exemple).. On peut y ajouter un.. effet temporaire.. pour représenter l'action qui vient d'être effectuée.. Voyons ainsi comment Panic représente l'effet consécutif au glisser - déposer d'un article du panier vers la liste :.. On peut observer un comportement similaire chez Flickr:.. Conclusion.. L'ensemble des recommandations évoquées dans cet article visent à.. profiter des avantages indéniables que présentent les interfaces de drag drop, tout en limitant les défauts.. que nous leur connaissons.. Soulignons une dernière fois qu'il est préférable de ne pas recourir au drag drop « pour le drag drop », mais plutôt parce que ce mode d'interaction nous permet de simplifier voire d'optimiser le travail de l'utilisateur.. Il est évidemment acceptable de vouloir exploiter le côté séduisant, innovant, dynamique du drag drop.. Cependant, il faudra alors penser à le doubler d'un mode d'interaction plus classique, ou répondre strictement à chacune des recommandations citées dans cet article.. L'idée étant de ne pas compliquer la tâche de l'internaute sous prétexte d'avoir voulu utiliser du drag drop!.. Pour en savoir plus.. Usability by Hand, AJAX and Efficiency.. , Thomas Baekdal, Baekdal.. com (2006).. Drag 'n Drop is Invisible To Users.. , Jared Spool, User Interface Engineering (2005).. When to use drag drop.. (some informal research results), Leisa Reichelt, Disambiguity (2006).. Drag and Drop Design Pattern Library.. , Yahoo! Developer Network.. Principles and Guidelines in Software User Interface Design.. , Deborah J.. Mayhew, Prentice Hall PTR (1991).. Chapitre 9 : Dialog Styles : Direct Manipulation.. Boomerang: suspendable drag-and-drop interactions based on a throw-and-catch metaphor.. , Kobayashi, M.. and Igarashi, T.. (2007).. In.. Proceedings of the 20th Annual ACM Symposium on User interface Software and Technology.. (Newport, Rhode Island, USA, October 07 - 10, 2007).. UIST '07.. ACM, New York, NY, 187-190..

    Original link path: /articles/ergonomie-drag-drop.print.php
    Open archive

  • Title: Tapworthy
    Descriptive info: 16 Février 2011.. "And polish, polish, polish.. " Une phrase qui revient comme un refrain, soulignant l'importance du détail, et l'effort nécessaire pour atteindre le "bon" détail.. Bien sûr, les contraintes du smartphone aident à ce souci de la finition : un petit nombre de choses à l'écran permet de prêter attention à la qualité du moindre élément.. Mais faire passer ce message à ses lecteurs n'est pas donné à tous les livres consacrés au design d'interfaces iPhone.. Le contenu.. On apprécie ici le passage en revue approfondi des sujets : contenu de l'application, ergonomie physique, interface, icônes, libellés, emplacements, flux d'interaction, notifications, découvrabilité, feedback, usages : tout est décortiqué.. Ce faisant, on comprend l'expérience utilisateur comme le croisement de tous ces paramètres.. D'ailleurs, l'auteur a beau recommander d'employer le plus souvent possible les guidelines d'Apple en la matière, il n'hésite pas à souligner les sujets où il est possible (voire recommandé) de s'éloigner des recommandations de la maison mère (ex..  ...   Chapitre 9 : Know the Landscape.. Chapitre 10 : Polite Conversation.. Chapitre 11 : Howdy, Neighbor.. Bien sûr, on y découvre aussi tout un tas d'applications, de domaines très divers, et cette inspiration à elle seule peut nourrir le lecteur, parfois le faire sourire (CrunchFu, Umbrella, Tea round.. Des interviews de concepteurs (Jürden Schweizer pour Things, Rusty Mitchell pour USA Today, Craig Hockenberry et Gedeon Maheux pour Twitterrific, Joe Hewitt pour Facebook.. ) viennent compléter l'ensemble et fournissent des retours d'expérience très vivants, proches du quotidien d'un designer d'interfaces.. Pour conclure.. Josh Clark nous donne ici un livre qui s'avale d'une traite, abondamment illustré, avec ce qu'il faut de sérieux et d'humour.. Un livre qui traite certes la problématique du physique et de l'interface, mais pense aussi à l'essentiel en enseignant l'importance du focus, du choix, du renoncement.. A voir aussi.. La fiche Amazon.. Global moxie,.. le site de Josh Clark.. » A voir aussi sur Ergolab.. Amélie Boucher.. ergolab.. net/livres/ergonomie-web-illustree.. php..

    Original link path: /livres/tapworthy.print.php
    Open archive



  •  


    Archived pages: 258