[spip-dev] Proposition menu à la gmail - efficacité des outils collaboratifs

Dev
1

Hello,

Toujours dans l'optique de tester des choses, j'ai complété ma proposition de menu précédente.

En discutant avec Cerdic j'ai réalisé que certaines entrées du menu étaient spécifiques en ce sens qu'elles concernent des outils de travail collaboratif ; vous aurez reconnu : l'agenda, la messagerie, et le forum interne.

Aussi cette spécificité ne me semblait pas propice à la mise en menu, car ces fonctionnalités si elles sont activées doivent présenter une visibilité suffisante pour être efficace.

D'où l'idée suivante, en plus de les sortir du menu, les mettre en valeur à la mode gmail (barre en haut), en passant en pleine largeur.

Cela m'a permis au passage de placer d'autres infos dans cette barre, telle que le lien vers l'aide.

Voir prototype ici :

http://www.patagium.net/IMG/demo/accueil.html

BoOz

2

BoOz a écrit :

Hello,

http://www.patagium.net/IMG/demo/accueil.html

ce mode de navigation me semble plus accessible :slight_smile:

3

en ce sens qu'elles concernent des outils de travail collaboratif ; vous aurez reconnu : l'agenda, la messagerie, et le forum interne.

Je trouve ça dommage de rendre si visible ces vieux trucs d'un usage très peu répandu, et qui ne sont/seront que des options/plugins...
Concernant le travail collaboratif... il y a bien des façon de travailler ensemble et sur les sites SPIP que j'administre, je déconseille vivement l'usage de la messagerie et du forum interne, cela ayant joué plus de tours pendables qu'autre chose.
Bref : peut mieux faire.

D'où l'idée suivante, en plus de les sortir du menu, les mettre en valeur à la mode gmail (barre en haut), en passant en pleine largeur.

Et il faut être affublé de strabisme divergent pour pouvoir en profiter ?
Caler la page à 100% de la fenêtre est une bêtise, à notre époque où les écrans ont tendance à s'élargir grandement, car l'humain, lui, a toujours autant de difficultés à suivre les lignes trop longues.

4

romy@rezo.net wrote:

en ce sens qu'elles concernent des outils de travail collaboratif ; vous aurez reconnu : l'agenda, la messagerie, et le forum interne.

Je trouve ça dommage de rendre si visible ces vieux trucs d'un usage très peu répandu, et qui ne sont/seront que des options/plugins...

En fait elle ne sont visibles que si on a activé les fonctionnalités. Mais dans ce cas, elle sont efficacement présenté.
Dans ta proposition qui consiste à les placer dans un menu dépliant on les voit moins, d'ou l'efficacité moindre. En plus tu monopolise une entrée principale pour cela.

Concernant le travail collaboratif... il y a bien des façon de travailler ensemble et sur les sites SPIP que j'administre, je déconseille vivement l'usage de la messagerie et du forum interne, cela ayant joué plus de tours pendables qu'autre chose.

Je ne m'en suis jamais servi non plus. Mais peut-être que c'est utile à d'autres. L'idée de travail collaboratif est interressante en tous les cas.

D'où l'idée suivante, en plus de les sortir du menu, les mettre en valeur à la mode gmail (barre en haut), en passant en pleine largeur.

Et il faut être affublé de strabisme divergent pour pouvoir en profiter ?
Caler la page à 100% de la fenêtre est une bêtise, à notre époque où les écrans ont tendance à s'élargir grandement, car l'humain, lui, a toujours autant de difficultés à suivre les lignes trop longues.

C'est un point de vue que je ne partage pas. Le menu de gmail me semble très moderne et pratique - on peut supposer que des ergonomes qualifiés ont participé à sa conception. Il a le mérite de prendre très peu de place tout en étant efficace. Et si on place bien les fonctionnalités, on le lit pas une ligne mais bien deux zones, une à droite, une a gauche.

Ca reste une proposition pour prospecter. Donc en effet, sans doute, peut mieux faire.

BoOz

5

BoOz a écrit :

Hello,

Toujours dans l'optique de tester des choses, j'ai complété ma proposition de menu précédente.

En discutant avec Cerdic j'ai réalisé que certaines entrées du menu étaient spécifiques en ce sens qu'elles concernent des outils de travail collaboratif ; vous aurez reconnu : l'agenda, la messagerie, et le forum interne.

Aussi cette spécificité ne me semblait pas propice à la mise en menu, car ces fonctionnalités si elles sont activées doivent présenter une visibilité suffisante pour être efficace.

D'où l'idée suivante, en plus de les sortir du menu, les mettre en valeur à la mode gmail (barre en haut), en passant en pleine largeur.

Cela m'a permis au passage de placer d'autres infos dans cette barre, telle que le lien vers l'aide.

Voir prototype ici :

http://www.patagium.net/IMG/demo/accueil.html

BoOz

Je le trouve excellent celui-là. Déjà, ne serait-ce que par le petit dégradé (gris foncé, gris clair, blanc) des trois barres qui coïncident affordament avec les catégories d'information.
J'en profite pour passer une vielle facture concernant le recherche : ce n'est pas un peu redondant de mettre trois éléments pour que l'utilisateur s'en aperçoive de qu'on est en train de lui présenter un champ de recherche ? Je dirais que c'est un excès d'affordation, et trop d'affordance tue l'affordance, c'est bien connu. Mettons, par exemple, un champ avec le mot "Recherche…" à l'intérieur qui s'évanouirait avec le focus, et puis c'est marre.

A+

Luis

6

Mais dans ce cas :

1) à quoi sert la balise <label> en HTML, puisque ta méthode vaudrait pour n'importe quel formulaire, finalement ?

2) la fameuse Amélie [1] a bien dit qu'un champ unique sans bouton aucun peut complètement perturber l'utilisateur. Il tape son truc, et ne sait plus quoi faire (qu'est-ce qui lui indique qu'il doit taper sur Entrée, à part que toi tu le sais ?).

[1] http://www.dailymotion.com/video/x7o6g8_amelie-boucher-ergonomie-des-interf_tech

7

RastaPopoulos a écrit :

J'en profite pour passer une vielle facture concernant le recherche : ce
n'est pas un peu redondant de mettre trois éléments pour que
l'utilisateur s'en aperçoive de qu'on est en train de lui présenter un
champ de recherche ? Je dirais que c'est un excès d'affordation, et trop
d'affordance tue l'affordance, c'est bien connu. Mettons, par exemple,
un champ avec le mot "Recherche…" à l'intérieur qui s'évanouirait avec
le focus, et puis c'est marre.

Mais dans ce cas :

1) à quoi sert la balise <label> en HTML, puisque ta méthode vaudrait pour n'importe quel formulaire, finalement ?

2) la fameuse Amélie [1] a bien dit qu'un champ unique sans bouton aucun peut complètement perturber l'utilisateur. Il tape son truc, et ne sait plus quoi faire (qu'est-ce qui lui indique qu'il doit taper sur Entrée, à part que toi tu le sais ?).

[1] http://www.dailymotion.com/video/x7o6g8_amelie-boucher-ergonomie-des-interf_tech

--
RastaPopoulos

Soit. Les normes, l'intégration des normes et l'utilisateur perturbé, qui, à force d'être protégé affordament ne pourrait élucider le non connu que si on lui tient la main, un essai/erreur lui paraissant une torture.
Vu que ma position est intenable face à tant d'intégrité, je corrige mon message précedent en ne laissant que ce beau paragraphe (le premier) : "Je le trouve excellent celui-là. Déjà, ne serait-ce que par le petit dégradé (gris foncé, gris clair, blanc) des trois barres qui coïncident affordament avec les catégories d'information."

A +

Luis, l'affordiable

8

3) Et le mot « Recherche » (qui en plus disparaît) c'est hyper vague... Ça ne dit pas où je recherche : sur le Web ? sur le site ? dans l'espace privé ?
Ce ne serait vraiment pas un luxe de préciser, notamment sur les pages (telles que ?exec=auteurs, ?exec=controle_forum, etc.) où la présence de plusieurs champs de recherche, identiquement intitulés « Rechercher », est particulièrement déroutante.

4) Pré-remplir le champ est une mauvaise pratique dont on est en train de revenir : au lieu d'apporter une explication à l'utilisateur, celui-ci ressent le champ comme étant déjà rempli donc plus à remplir et zappe.

Pour les formulaires de recherche, label + input + bouton est un trio minimal nécessaire si l'on ne veut pas perdre une foule d'utilisateurs en route.

9

romy@rezo.net a écrit :

10

BoOz@rezo.net a écrit :

http://www.patagium.net/IMG/demo/accueil.html

romy@rezo.net wrote:

Caler la page à 100% de la fenêtre est une bêtise, à notre époque où les écrans ont tendance à s'élargir grandement, car l'humain, lui, a toujours autant de difficultés à suivre les lignes trop longues.

Avec un écran 19 pouces ca reste satisfaisant, et cela passe aussi en 800x600.

Mais on peut aussi décider de fixer la largeur, je ne suis pas rigide la dessus.

Mon idée c'était sourtout de présenter les infos que je présente dans la barre du haut, pour avoir une "efficacité des outils collaboratifs" renforcée.

BoOz

11

Je trouve des éléments très intéressants dans cette proposition :

Il me semble que la disposition des éléments sur les 3 bandeaux suit une logique si on considère la fréquence des "clics" qu'ils génèrent.

Plus le bandeau est haut, et sombre, moins il suscite de clics et ce d'autant moins que je ne serai pas alerté par un chiffre entre parenthèses.

En revanche le bandeau du bas, le plus clair, va lui recevoir l'essentiel des clics.

On a quelque chose de bien conçu si on se réfère au sens de la lecture de gauche à droite et de bas en haut, ainsi on aura statistiquement le plus de chance d'avoir un clic à la fin de la lecture des bandeaux, sans avoir à les balayer en sens inverse.

Les menus déroulants verticaux renforcent cette impression.

Ces bandeaux incitent donc à la plongée dans la page.

Pour le reste je n'ai pas d'avis tranché.

Corrobori

12

<quote who='Luis Speciale' when='09/02/2009 15:11'>

Catastrophes ignorées allégrement partout, mais rien ne nous empêche de les craindre.

http://www.luis-speciale.net/recherche.jpg

Jolie expression :slight_smile:

<troll>
... et puis les handicapés visuels qui ont une revue d'écran et qui ne savent pas à quoi sert ce champ de saisie, on s'en fout.
</troll>

Pour reprendre dans tes exemples ceux dont j'ai pu identifier la source d'après tes saisies d'écran :

elpais.com :
<input class="caja" type="text" name="query"/>
Inutilisable avec une revue d'écran : aucune information sur l'usage du champ

nytimes.com :
<input id="searchQuery" class="text" name="query"/>
Inutilisable avec une revue d'écran : aucune information sur l'usage du champ

monde-diplomatique.fr :
<input type="text" value="Recherche..." name="s"/>
Ah là c'est mieux, il y a au moins une value. Je tabule jusqu'à ce champ et *ah zut* le javascript vide le champ avant que ma revue d'écran n'ait pu me dire ce qui s'y trouve. C'est donc pratiquement inutilisable.

Vraiment, je suis désolé, et les Spipeurs vieux de la vieille te confirmeront que je ne suis pas le genre à troller inutilement, mais là tes exemples ne sont pas bons.

Malgré ma remarque, soyons constructifs et tâchons de trouver un compromis minimaliste entre le besoin esthétique et le besoin d'accessibilité et d'ergonomie :
- si on ne peut pas mettre le label, il est admis qu'à peu près tous les outils d'assistance se contentent maintenant d'un title sur le champ ;
- un input impage pour lancer la recherche, ça peut quand même être pas mal, quitte à ce qu'il se présente comme une simple loupe mais avec un texte alternatif "lancer la recherche" (un bouton qui m'indique quelle action sera déclenchée par mon clic, en clair)

donc :
<input type="text" title="Recherche"
  [ éventuellement un value="Recherche..." qu'on videra en JS, pourquoi pas, je n'ai pas d'avis en ergonomie ]
  [ ... autres attributs... ]
  />
<input type="image" alt="Lancer la recherche"
  [ ... autres attributs ... ]
  />

13

- si on ne peut pas mettre le label, il est admis qu'à peu près tous les
outils d'assistance se contentent maintenant d'un title sur le champ ;
- un input impage pour lancer la recherche, ça peut quand même être pas mal,
quitte à ce qu'il se présente comme une simple loupe mais avec un texte
alternatif "lancer la recherche" (un bouton qui m'indique quelle action sera
déclenchée par mon clic, en clair)

Personnellement je pense que la bonne structure est
<form><label /><input /><button /></form>

le reste doit pouvoir se jouer en css

Puisque tu parles du Diplo un projet un peu plus récent a un
comportement un peu meilleur :
http://blog.mondediplo.net/ (c'est le plugin "jolirecherche", sur la zone)

Mais bon c'est clair que c'est pas totalement satisfaisant. Et je dois
dire que si on est pas foutu de trouver la manière ultime de faire un
formulaire de recherche (le plus simple qui soit !), on ne saura faire
aucun formulaire !

-- Fil

14

Détrompe-toi, ce n'est pas le plus simple des formulaires ! Car il subit souvent et plus qu'aucun autre, de fortes contraintes (encombrement qu'on réduit au minimum, accessibilité qu'on aimerait optimum, créas qui revisitent les conventions en dépit du bon sens, geeks qui croient que c'est tellement évident qu'il faut épurer encore, etc.)
Nan, le formulaire de recherche, c'est le plus hard de tous :slight_smile:

15

Fil a écrit :

- si on ne peut pas mettre le label, il est admis qu'à peu près tous les
outils d'assistance se contentent maintenant d'un title sur le champ ;
- un input impage pour lancer la recherche, ça peut quand même être pas mal,
quitte à ce qu'il se présente comme une simple loupe mais avec un texte
alternatif "lancer la recherche" (un bouton qui m'indique quelle action sera
déclenchée par mon clic, en clair)

Personnellement je pense que la bonne structure est
<form><label /><input /><button /></form>

le reste doit pouvoir se jouer en css

Puisque tu parles du Diplo un projet un peu plus récent a un
comportement un peu meilleur :
http://blog.mondediplo.net/ (c'est le plugin "jolirecherche", sur la zone)

Joli ! En plus, tellement il est neutre qu'il peut s'adapter très bien au reste de l'interface. Tout de même (pauvres coléoptères !-), j'aurais écrit "Recherche…" et non "recherche", mais ça, c'est de l'ultime analyse… Voyez-vous, les points suspensifs justifient bien leur salaire, Hitchcock dixit.

A+

Luis

16

http://blog.mondediplo.net/ (c'est le plugin "jolirecherche", sur la zone)

Bon j'ai reprogrammé en grande partie jolirecherche ; est-ce que c'est
plus accessible comme ça ?

-- Fil

17

dans le title sur le champ input je mettrais qqcchose comme :
entrez ici le mot recherché
et on peut pas dire que >> soit très parlant, sur le bouton une title aussi avec qqchose comme validez votre recherche

Aurélien

18

dans le title sur le champ input je mettrais qqcchose comme :
entrez ici le mot recherché

Je fais avec ce qui existe dans les chaînes de langue. Mais c'est TRES
verbeux ce que tu proposes...

et on peut pas dire que >> soit très parlant, sur le bouton une title aussi
avec qqchose comme validez votre recherche

"Envoi" peut-être ?

-- Fil

19

<quote who='Fil' when='10/02/2009 22:42'>

dans le title sur le champ input je mettrais qqcchose comme :
entrez ici le mot recherché

Je fais avec ce qui existe dans les chaînes de langue. Mais c'est TRES
verbeux ce que tu proposes...

Je trouve aussi :slight_smile:

et on peut pas dire que >> soit très parlant, sur le bouton une title aussi
avec qqchose comme validez votre recherche

"Envoi" peut-être ?

"Lancer la recherche" commence à être canonique dans nos milieux intégristes, je trouve.

20

<quote who='Fil' when='10/02/2009 21:57'>

http://blog.mondediplo.net/ (c'est le plugin "jolirecherche", sur la zone)

Bon j'ai reprogrammé en grande partie jolirecherche ; est-ce que c'est
plus accessible comme ça ?

Bonne idée le label caché par jquery. Mais bon du coup c'est presque trop : s'il ne sert pas, autant ne pas s'embêter à le mettre.

(ceci était ma seconde de pragmatisme de la soirée)