[spip-dev] Prototype de navigation haute pour l'interface SPIP

Dev
1

Et si on repensait la navigation haute de l'espace privé de SPIP ?

Voici un prototype rassemblant les idées que j'ai eue pour améliorer cette navigation. Il s'agit d'un « prototype fonctionnel », c'est-à-dire un truc cliquable mais qui ne présume pas de l'aspect graphique (ni de la qualité du code). Il propose aussi un ré-agencement des menus et des pages liées, qui reste discutable (certains intitulés seraient à reformuler).

Je me suis surtout attachée à clarifier, occuper moins de surface sans rien omettre ET permettre de recevoir des items additionnels (plugins, ici signalés en gris clair) de façon extensible.

AVANT DE CLIQUER, notez que je conçois les choses dans cet ordre :
1 - une navigation page à page, basique et tout terrain
2 - enrichie d'une navigation rapide sous la forme d'un menu déroulant, certainement activé par défaut, mais désactivable (dans mes préférences personnelles)
3 - ensuite enrichie de comportements js kikou (dont je me contrefiche pourvu qu'ils soient facultatifs)
3 - et enrichie d'icônes et habillage graphique (dont je me fiche aussi)

C'est donc là :
http://romy.tetue.net/IMG/demo/interface/navigation/
cliquez sur le faux bouton « valider », puis un peu partout (visitez chaque item) et même sur les liens « Voir le site public » et « Me déconnecter » :slight_smile:

2

Bravo c'est super, plus orienté utilisateur et plus clair...
Un progrès certain.
Vivement spip 2.1 avec de vrai morceaux de tendresse dedans:)

pierre

3

romy@rezo.net wrote:

Je me suis surtout attachée à clarifier, occuper moins de surface sans rien omettre ET permettre de recevoir des items additionnels (plugins, ici signalés en gris clair) de façon extensible.

J'aime beaucoup. Bravo !

Paolo

4

Idem, c'est logique et ordonné !

-----Message d'origine-----

5

Et si on repensait la navigation haute de l'espace privé de SPIP ?

Oh oui !

Voici un prototype rassemblant les idées que j'ai eue pour améliorer cette navigation. Il s'agit d'un « prototype fonctionnel », c'est-à-dire un truc cliquable mais qui ne présume pas de l'aspect graphique (ni de la qualité du code). Il propose aussi un ré-agencement des menus et des pages liées, qui reste discutable (certains intitulés seraient à reformuler).
Je me suis surtout attachée à clarifier, occuper moins de surface sans rien omettre ET permettre de recevoir des items additionnels (plugins, ici signalés en gris clair) de façon extensible.

Parfait comme points de départ, effectivement, c'est devenu trop compliqué depuis quelque temps.

AVANT DE CLIQUER, notez que je conçois les choses dans cet ordre :
1 - une navigation page à page, basique et tout terrain

Pour les entrées principales, je serais bien plus drastique :

- Plutôt que "Accueil", je mettrais "Tableau de bord", et cette page devrait lister toutes les actions en attente, y compris de modération. Elle ne devrait pas lister les secteurs comme actuellement.
- Plutôt que "Édition", je mettrais "Contenus"
- A mon sens, la "Modération" fait partie du "Suivi", et de même la "Configuration" fait partie de l'"Administration".
- De même que signalé par d'autre, il y a forte redondance entre "Dominique Larivière", "(i)" et "Moi", le premier devrait suffire.
- Du coup, avec ces grandes simplifications, on pourrait supprimer la seconde barre de menu, "Navigation rapide" étant de toute façon dans "Contenus", le suivant avec la flèche (a-t-il un nom ?) aussi, l'aide se retrouvant de façon plus intuitive en haut à droite, le choix de la langue étant replacé dans le profil de l'utilisateur, et la recherche pouvant profiter de la place libérée au dessus.

2 - enrichie d'une navigation rapide sous la forme d'un menu déroulant, certainement activé par défaut, mais désactivable (dans mes préférences personnelles)

Chargé en Ajax, ou directement présent dans le code de toutes les pages ?

Est-ce qu'on peut envisager à ce stade de rendre le site plus facilement gérable depuis un terminal de taille réduite genre smartphone et des outils de navigation adaptés à certains handicaps ?

3 - ensuite enrichie de comportements js kikou (dont je me contrefiche pourvu qu'ils soient facultatifs)

Mais qui ont rendu les dernières versions beaucoup plus productives que les premières... :wink:

3 - et enrichie d'icônes et habillage graphique (dont je me fiche aussi)

4 ? :wink:

Pour ma part j'utilise plutôt l'interface avec icônes et sans texte, je trouve plus rapide de reconnaître l'icône pour aller au bon endroit...

C'est donc là :
Prototype de navigation haute pour l'interface SPIP
cliquez sur le faux bouton « valider », puis un peu partout (visitez chaque item) et même sur les liens « Voir le site public » et « Me déconnecter » :slight_smile:

Malgré toutes mes remarques ci-dessus, bravo pour ce boulot, cela aide à se poser les bonnes questions !

Et au passage, la barre présente en haut de page même sur le site public, ça n'est finalement que de la mise en forme par rapport à ce qu'on a déjà, mais ça donne une uniformité avec la partie privée qui aide bien à voir que cela ne fait pas partie du site public en lui-même, super. Ce serait top qu'on puisse ainsi naviguer dans le site en prévisualisant tous les contenus proposés pour lesquels on est admin, restreint ou non !

-Nicolas

6

romy@rezo.net a écrit :

C'est donc là :
Prototype de navigation haute pour l'interface SPIP

moi, ce qui me gêne encore c'est la double fonction des items de premier niveau (les grosses icones actuellement), les items de barre de menu dans l'exemple.

il y a encore des gens (si si) qui, puisque ça déroule un truc, ne voient pas qu'on peut *aussi* cliquer dessus et que ça ouvre d'autres portes.

j'ai bien compris (je crois) que, tel que c'est proposé, un clic sur les items de cette barre de menu ne fera qu'ouvrir une page listant les sous-items qui s'affichent au survol, mais du coup, je me dis :
- il y a redondance
- quid de l'item de premier niveau qui n'a pas de sous-menu déroulant : 'accueil' ?

7

Pierre Fiches wrote:

Bravo c'est super, plus orienté utilisateur et plus clair...
Un progrès certain.

C'est gentil ce que tu dis, merci. Mais en revanche c'est très enervant si tu ne précises pas en quoi c'est mieux (et oui car figure toi que ce qu'il y a actuellement n'est aps la par hasard, il y a des gens qui ont bossé dessus).

Donc pour ne pas partir en troll, restons pros, efficace tout ca.

BoOz

8

denisb a écrit :

moi, ce qui me gêne encore c'est la double fonction des items de premier niveau (les grosses icones actuellement), les items de barre de menu dans l'exemple.

alors je me dis :
soit on a pas le js d'activé, donc pas de sous-menu déroulant, alors les items de la barre de menu sont cliquables ;
soit on a le js d'activé, donc les sous-menu déroulant, alors les items de la barre ne sont plus cliquables.

mais, dans ce cas n° 2, reste la spécificité de 'accueil'

9

denisb a écrit :

moi, ce qui me gêne encore c'est la double fonction des items de premier niveau (les grosses icones actuellement), les items de barre de menu dans l'exemple.

alors je me dis :
soit on a pas le js d'activé, donc pas de sous-menu déroulant, alors les items de la barre de menu sont cliquables ;
soit on a le js d'activé, donc les sous-menu déroulant, alors les items de la barre ne sont plus cliquables.

Ca ne gêne en rien de laisser les items de premier niveau clicable dans ce cas car la page à laquelle ils amènent n'est pas indispensable : elle est une redondance du menu deroulant.
Le gros probleme actuel est que les icones de premier niveau clicables emmènent vers des pages inaccessibles par un autre moyen, et indispensables.

mais, dans ce cas n° 2, reste la spécificité de 'accueil'

du coup on a pas de spécificité, et 'Accueil' et un terme suffisamment compris pour être affordant au clic.
On pourra éventuellement renforcer cette invitation à le cliquer par un traitement visuel différent, ou par une terminologie différente en utilisant des verbes sur les 5 items centraux, ce qui donnerait

Accueil | Editer | Suivre | Modérer | Configurer | Administrer | Moi

Cédric

10

plus orienté utilisateur :
- exemple le regroupement du profil avec le changement du mot de passe très simple à trouver

plus clair :
- opinion, ressenti...

Conclusion : je pense que c'est la bonne direction...

pierre

11

Oui mais alors l'affordance de Suivre | Modérer d'une part et | Configurer | Administrer d'autre part me semble assez faible. C'est lié à la proximité des intitulés.

Quelle logique a abouti à ce découpage ? Découpage role ?

Par ailleurs je propose de réfléchir à la l'interet de garder une entrée "Utilisateurs".

Il me semble que ca pourrait etre pratique en prévision d'entrées de plugins (gestion de droits, abonnements, notifications).

On peut aussi les laisser dans "édition" mais j'ai l'intuition que ce n'est pas trop trop affordant, ni ergonomique.

Enfin, je viens de benchmarquer un Joomla : leur menu est un peu foutoir aussi, je détaille un peu les spécificités pour avis.

Ils regroupent la configuration, les stats, les configs de squelettes, les utilisateurs dans "Site".

Une autre entrée "installation" permet d'ajouter des plugins / squelettes.

Une entrée "système" regroupe les trucs du type vider le cache, console de log, debug.

Qu'en dites vous ?

BoOz

12

Hello tous,

D’abord, merci beaucoup tetue pour cette maquette :slight_smile: c’est clair, logique et ordonné. Et c’est du joli balisage en ul li en plus.

Booz dit :

Oui mais alors l’affordance de Suivre | Modérer d’une part et | Configurer | Administrer d’autre part me semble assez faible. C’est lié à la proximité des intitulés.

J’ai tendance à penser pareil. Quoique Suivi | Modération, ça va encore. Mais Configuration | Administration, c’est trop proche pour moi.

Par ailleurs je propose de réfléchir à la l’interet de garder une entrée « Utilisateurs ».
Il me semble que ca pourrait etre pratique en prévision d’entrées de plugins (gestion de droits, abonnements, notifications).
On peut aussi les laisser dans « édition » mais j’ai l’intuition que ce n’est pas trop trop affordant, ni ergonomique.

Pareil, je ne trouve pas que « auteurs » dans « édition » soit intuitif. J’ai mis un petit bout de temps à trouver.
Amha, « Edition » ne doit concerner que les objets éditoriaux de spip et ce qui s’y rattache. « Auteurs » je le mettrais dans « Administration »… à la place de « gestion des accès » (c’est la même page en plus).

Sur le fait d’utiliser des verbes plutôt que des noms pour les intitulés de menus, ce n’est pas indispensable.
Un bouton cliquable ou un menu possède déjà une affordance de modification/naviguation (on est dans un back-office, pas sur une interface publique; l’utilisateur en est conscient).
Renforcer celà en utilisant un verbe peut se comprendre, mais cela restreint le champ lexical des termes utilisables.

Par exemple, je trouve que « Système » est un bon candidat pour remplacer « Administration », Par contre, sous forme de verbe… dur dur.

Enfin, j’ai pas encore trop réfléchi à la question, mais croyez vous qu’un troisième niveau dans les menus soit pertinent ? J’ai peur que dans le système actuel, les choses soient trop « plates », surtout avec un spip qui a pas mal de plugins.

Enfin, je viens de benchmarquer un Joomla : leur menu est un peu foutoir aussi, je détaille un peu les spécificités pour avis.

Ils regroupent la configuration, les stats, les configs de squelettes, les utilisateurs dans « Site ».

« Site » c’est bof, mais le regroupement fonctionnel est pas mal.

Une autre entrée « installation » permet d’ajouter des plugins / squelettes.

Une entrée « système » regroupe les trucs du type vider le cache, console de log, debug.

J’aime bien « installation » et « système », quoique je ne les mettrais pas au même niveau. « installation » dans « système » c’est plus logique ^^

Tu nous fais une maquette ? :stuck_out_tongue:

Bon j’espère que je dis pas trop de bétises… certaines contraintes techniques doivent m’échapper.

13

romy@rezo.net a écrit :

C'est donc là :
Prototype de navigation haute pour l'interface SPIP

A mon avis c'est super. Je crois que l'on pourrait mettre les éléments qu'on trouve dans la flèche (Ecrire un nouvel article, etc) dans le menu Edition. Mais c'est plus ergonomique (a mon avis).
Tous ces "à mon avis" commencent a me les casser. Je ne tiendrai pas la route à jour les gentils garçons

A+

Luis

14

Trop beau !

15

Gus ashaszin a écrit :

Hello tous,

D'abord, merci beaucoup tetue pour cette maquette :slight_smile: c'est clair, logique et ordonné. Et c'est du joli balisage en ul li en plus.

Booz dit :

    Oui mais alors l'affordance de Suivre | Modérer d'une part et |
    Configurer | Administrer d'autre part me semble assez faible. C'est
    lié à la proximité des intitulés.

J'ai tendance à penser pareil. Quoique Suivi | Modération, ça va encore. Mais Configuration | Administration, c'est trop proche pour moi.

Hello, merci Ashaszin pour ces remarques.
Juste pour dire ou redire qu'il y a un exemple avec des icones ici : http://marcimat.magraine.net/ftp/proto/accueil_icone.html et que par ailleurs, il y a un petit js pour que la navigation clavier fonctionne.

Pour revenir aux points abordés ici, il me semble que "Modération" est mal nommé. "Interactivité" ressemble le plus au contenu du menu, mais en même temps c'est un intitulé par très parlant.

Par exemple, je trouve que "Système" est un bon candidat pour remplacer "Administration"

Je trouve que "Administration" et "Configuration" sont bien distincts (en mettant la gestion des plugins dans administration). L'administration concernerait plutôt le webmestre, avec des actions qui interviennent sur la structure de la base de données, la configuration, elle peut être modifiée par un administrateur du site... "Système" à la place de "Administration" me convient aussi remarque.

Enfin, j'ai pas encore trop réfléchi à la question, mais croyez vous qu'un troisième niveau dans les menus soit pertinent ?

Non, je pense que s'il y a un 3è niveau, c'est dans les pages en question, mais pas affichées dans le menu, sinon ça va (re)devenir une usine à gaz de CSS pour gérer ce 3è niveau.

J'aime bien "installation" et "système", quoique je ne les mettrais pas au même niveau. "installation" dans "système" c'est plus logique ^^

Tu nous fais une maquette ? :stuck_out_tongue:

Oui booz, tu pourrais faire un proposition de menu STP ?

J'aime bien aussi la proposition de NH de mettre à la place de "Accueil" quelque chose comme "Tableau de Bord" (j'avais proposé "Observatoire"), mais qui contient le contenu de "Modération"...

Ca pourrait donner :

- Observatoire (Accueil)
   * suivre les forums
   * suivre les pétitions
   * suivre les notes
   * suivre les listes
   * (statistiques ?)

- Contenus
   * Articles
   * Rubriques
   * Breves
   * ...

- Suivi interne
   * Vie du site
   * Révisions
   * Liens entrants
   * Agenda
   * (statistiques?)
   * Messagerie ...

- Configuration
   * Identité
   * Gestion des langues
   * ...

- Système
   * Vider le cache
   * Maintenance
   * Sauvegardes
   * Gestion des plugins

- Moi
   * Qui suis-je
   * Mes articles
   * ...

Reste le cas "Auteurs" que je sais pas trop où mettre effectivement...

16

Magnifique les icônes !

17

Gus ashaszin a écrit :

Hello tous,
D'abord, merci beaucoup tetue pour cette maquette :slight_smile: c'est clair, logique et ordonné. Et c'est du joli balisage en ul li en plus.
Booz dit :
   Oui mais alors l'affordance de Suivre | Modérer d'une part et |
   Configurer | Administrer d'autre part me semble assez faible. C'est
   lié à la proximité des intitulés.

J'ai tendance à penser pareil. Quoique Suivi | Modération, ça va encore. Mais Configuration | Administration, c'est trop proche pour moi.

Hello, merci Ashaszin pour ces remarques.
Juste pour dire ou redire qu'il y a un exemple avec des icones ici : http://marcimat.magraine.net/ftp/proto/accueil_icone.html et que par ailleurs, il y a un petit js pour que la navigation clavier fonctionne.

Pour revenir aux points abordés ici, il me semble que "Modération" est mal nommé. "Interactivité" ressemble le plus au contenu du menu, mais en même temps c'est un intitulé par très parlant.

Par exemple, je trouve que "Système" est un bon candidat pour remplacer "Administration"

Je trouve que "Administration" et "Configuration" sont bien distincts (en mettant la gestion des plugins dans administration). L'administration concernerait plutôt le webmestre, avec des actions qui interviennent sur la structure de la base de données, la configuration, elle peut être modifiée par un administrateur du site... "Système" à la place de "Administration" me convient aussi remarque.

Enfin, j'ai pas encore trop réfléchi à la question, mais croyez vous qu'un troisième niveau dans les menus soit pertinent ?

Non, je pense que s'il y a un 3è niveau, c'est dans les pages en question, mais pas affichées dans le menu, sinon ça va (re)devenir une usine à gaz de CSS pour gérer ce 3è niveau.

J'aime bien "installation" et "système", quoique je ne les mettrais pas au même niveau. "installation" dans "système" c'est plus logique ^^
Tu nous fais une maquette ? :stuck_out_tongue:

Oui booz, tu pourrais faire un proposition de menu STP ?

J'aime bien aussi la proposition de NH de mettre à la place de "Accueil" quelque chose comme "Tableau de Bord" (j'avais proposé "Observatoire"), mais qui contient le contenu de "Modération"...

Ca pourrait donner :

- Observatoire (Accueil)
* suivre les forums
* suivre les pétitions
* suivre les notes
* suivre les listes
* (statistiques ?)

- Contenus
* Articles
* Rubriques
* Breves
* ...

- Suivi interne
* Vie du site
* Révisions
* Liens entrants
* Agenda
* (statistiques?)
* Messagerie ...

- Configuration
* Identité
* Gestion des langues
* ...

- Système
* Vider le cache
* Maintenance
* Sauvegardes
* Gestion des plugins

- Moi
* Qui suis-je
* Mes articles
* ...

Typiquement, c'est confusionnant, car y a du suivi dans observatoire et un menu suivi : comment se rappeler quel suivi est ou ?

Dans la définition d'une navigation il y a plusieurs objectifs, l'un est que l'utilisateur ne se trompe pas de menu lorsqu'il cherche un item (idéalement qu'il soit sûr que c'est dans l'item X, à défaut, qu'il soit sûr que ça n'est pas être dans les autres items).

En répartissant la notion de suivi sur deux entrées tu créé la confusion mentale sur le bon rangement des choses.

Par ailleurs on perd le lien de retour à l'accueil dans ta proposition (étant entendu qu'à partir du moment ou l'entrée observatoire devient déroulante, elle perd sa capacité à inciter le clic, et que le terme observatoire ne renvoie à aucun repère connu de l'internaute, contrairement à accueil)

Sinon configuration et système sont mieux différenciants, mais système est trop geek.
Je crois que ce qui différencie les deux est que configuration concerne la config du site (liée à l'éditorial), alors que système/administration est lié à l'admin et à la config bas niveau (serveur, extension ...)

Il faudrait trouver les termes qui désignent cela mieux, mais je crois que sur le fond personne n'a discuté leurs contenus.

Cédric

18

Nicolas Hoizey a écrit :

Chargé en Ajax, ou directement présent dans le code de toutes les pages ?

à mon avis, chargé en ajaxe c'est lourd pour pas grand choses ... en plus j'ai peur que mes parents (qui sont encore sous des os 9) ne puissent plus se servir de spip :wink:

Pour ma part j'utilise plutôt l'interface avec icônes et sans texte, je trouve plus rapide de reconnaître l'icône pour aller au bon endroit...

à titre personnel je fais plutot l'inverse. Les icones, je trouve cela lourd. Donc je suis pour un maintient de l'option actuelle avec le choix.

19

faudrait faire un proto alternatif là, car ça fait beaucoups de modifs à visualiser mentalement pour discuter sur une même base
Cédric

20

cedric.morin@yterium.com a écrit :

Ca pourrait donner :

- Observatoire (Accueil)
* suivre les forums
* suivre les pétitions
* suivre les notes
* suivre les listes
* (statistiques ?)

Typiquement, c'est confusionnant, car y a du suivi dans observatoire et un menu suivi : comment se rappeler quel suivi est ou ?

Je comprends...

En répartissant la notion de suivi sur deux entrées tu créé la confusion mentale sur le bon rangement des choses.

Oui, mais dans ce cas là, est-ce bon de séparer "Suivi" et "Modération" ?

Pour info, l'exemple cité en plus visuel :
http://marcimat.magraine.net/ftp/proto/accueil_icone2.html