Refonte complète de l'interface des contenus

De la rédaction à la lecture pour les tutoriels, articles et billets

a marqué ce sujet comme résolu.

Il est remonté plusieurs fois récemment que l’interface liée aux contenus n’était pas forcément optimisée.

Notamment (et sans vouloir être exhaustif) la rédaction est compliquée à prendre en main, le partage n’est pas mis en avant, certaines actions sont un peu cachées…

Je propose de lancer se sujet pour discuter de l’ensemble de ces interfaces pour les améliorer et améliorer l'engagement et l'expérience utilisateur.

Comme discuté sur Discord, j’ai proposé de réaliser un état des lieux (une sorte de mini-audit) de l’UX et de proposer quelques maquettes pour régler les plus gros problèmes.

Si vous avez vous-mêmes des doléances à remonter ou des suggestions à partager c’est le lieu, en essayant d’éviter les digressions pour garder le sujet lisible.


Je commence par la liste des tutoriels avec une première maquette (incomplète) de la page "Mes tutoriels". L’idée est de 

  • se débarrasser de la sidebar
  • inciter au partage sur d’autres sites/réseaux
  • mettre en avant les actions principales pour chaque contenu
  • rendre plus évidents les liens pour commencer à rédiger

J’en profite pour incruster mes idées. Totalement compatibles avec d’autres idées d’ailleurs.


J’ai envie de vous présenter un concept général pour la refonte de l’interface de rédaction des tutoriels. Je ne suis pas graphiste, alors ce sera essentiellement des idées sur la structure de cette interface plutôt que des images concrètes.

Mon idée recoupe fortement certaines autres idées qui ont été émises. C’est très bien, parce que ça veut dire qu’on est globalement alignés. J’essaie juste d’aller un peu plus loin et un peu plus structuré.

J’ai eu cette idée à partir de réflexion sur la situation actuelle et de l’usage que j’en ai en tant qu’auteur. Je pense que présenter mes remarques sur celle-ci d’abord est pertinent.

La situation actuelle

Quand on rédige un tutoriel ou un article (ou même un billet), on se retrouve face à différentes complexités dans la rédaction. En particulier, je trouve qu’on a rapidement une perte de repères dans l’interface.

On a beaucoup d’éléments qui tournent autour de la rédaction, mai qui sont inégalement reliés entre eux :

  • l’interface de rédaction elle-même,
  • la version brouillon,
  • le sujet de bêta,
  • la version en bêta,
  • le MP de validation,
  • la version en validation,
  • les commentaires du tuto,
  • les galeries,
  • et sûrement d’autres.

Pour certains, on va rester dans le module de tutoriel, mais pour d’autres, on va sauter dans un autre module technique : les MP, le forum ou la galerie. Ce transfert est facile dans un sens, mais pas dans l’autre. Quoi qu’il arrive, on change de contexte.

On a aussi opéré un certain détournement au cours du temps pour rajouter des fonctionnalités. Pour la validation, le signalement de fautes, et d’autres choses, on se sert des MP comme une sorte d’historique d’événement et de notifications. C’est pratique, mais j’ai l’impression qu’on en abuse un peu. Il y a quelques dizaines de MP automatiques différents qui peuvent être envoyés !

J’aimerais qu’un auteur ait une vue plus unifiée autour d’un contenu.

L’espace de rédaction

Mon idée consiste à améliorer l’interface des tutoriels pour en faire un espace de rédaction centré autour du tutoriel et destiné aux auteurs. Cet espace de rédaction serait structuré autour de quatre vues de la rédaction :

  • l’écriture : ce qu’on appelle brouillon actuellement ;
  • la relecture : la bêta en gros ;
  • la validation : tout ce qui est échange avec la validation ;
  • la publication : tout ce qui concerne la version publiée.

Le but n’est pas de rajouter des fonctionnalités, mais de mieux ranger l’existant. Je propose quand même quelques nouveautés au passage.

L’écriture

Je mets dans cette vue les éléments suivants :

  • un mode plan serait pratique (avec tous les niveaux de titre et possibilité de bouger des trucs) ;
  • la demande d’aide ;
  • l’intégration de la galerie du tuto sans sortir du module de rédaction (on garde la barre "tuto" sur la gauche).

La relecture

Je mets dans cette vue les éléments suivants :

  • statut de la bêta pour le tuto : activé/désactivé ;
  • historique des versions qui sont allées en bêta avec des liens pour y accéder (pas sûr que ça existe déjà quelque part);
  • reprise du sujet de bêta sans aller sur le forum (à destination des auteurs uniquement, mais on pourrait élargir).

La validation

Je mets dans cette vue les éléments suivants :

  • statut du tuto en validation/pas en validation ;
  • historique de la validation : actuellement, je crois c’est réservé aux validateurs, je pense que les auteurs devraient pouvoir le visualiser aussi facilement ;
  • reprise du MP de validation sans aller dans le module de MP ;

La publication

Je mets dans cette vue les éléments suivants :

  • la visualisation des MP automatiques de signalement de faute ;
  • les commentaires sur le contenu bien sûr ;
  • les tags et catégories, qui actuellement sont en fait des métadonnées (utiles sur le site mais ne faisant pas partie du contenu) et qui ne sont pas versionnées de toute façon ;
  • nombre d’abonnés au contenu,
  • le lien canonique qui n’est pas versionné de toute façon.
+6 -0

Pour la refonte de la page mes tuto/articles/billets, quelque chose qui me faciliterait la vie serait de pouvoir créer des dossier. J’ai genre 15 articles de Recap communautaires, et deux séries de billets qui prennent beaucoup de place et rendent compliqué de trouver mes autres contenus. Pouvoir les organiser serait un luxe utile.

Pour l’instant, je vois deux axes qui se dégagent :

  • l’espace de rédaction,
  • la gestion des publication.

Quand il y aura plus d’idées sur chaque, on pourra faire une petite synthèse et structurer le travail pour arriver à faire le boulot. :)

Merci pour l’idée de refonte, plus que salutaire pour espérer attirer de nouveaux contributeurs !

Quelques idées :

  • Mettre les boutons « nouveaux tutos/articles » au dessus de la liste des tutos publiés (cf copie d’écran)
  • Une gestion des « nouvelles parties » et « sections » (ou du moins que les sections) à la « wordpress » c’est à dire en cliquant sur un plus on a un nouveau champ apparaissant :

+0 -0

J’ai genre 15 articles de Recap communautaires, et deux séries de billets qui prennent beaucoup de place et rendent compliqué de trouver mes autres contenus. Pouvoir les organiser serait un luxe utile.

@Rockaround Pouvoir filtrer par tag (ça pourrait presque se faire en front) ça t’irait ? Ou tu voudrais vraiment ajouter une gestion de dossiers juste pour l’auteur ?


@qwerty : Oui, pour la rédaction j’aimerais bien aussi que tout se fasse sur une même page ou presque, avec une édition linéaire sans devoir éditer l’intro et la conclusion en même temps, mais le milieu du contenu ailleurs… L’édition in place serait bien pratique.

D’ailleurs une suggestion pour les auteurs et validateurs, c’est trouver un système pour corriger en une seule fois dans Grammalecte/Antidote et pas textarea par textarea…

+0 -0

Complètement en vrac (de la rédaction à la lecture, c’est très vaste !):


Concernant la liste des tutoriels (cette page là : https://zestedesavoir.com/tutoriels/voir/"votre_pseudo"/ )

Il n’y a pas de raison légitime à mon sens de séparer tuto, article et billets. Tout mettre dans la même page avec des cases à cocher (N’afficher que [X] Tuto [X] Article [X] Billet ).

Les filtres sont peu pratiques. On ne peut pas filtrer plusieurs cas en même temps (afficher les contenus en béta OU en brouillon), et ne peut pas demander à re-afficher tous les contenus facilement.

Outre les dossiers proposés par @Rockaround, un truc qui m’aiderait à me repérer dans cette page (j’ai beaucoup de contenus), ce serait une icône qui indiquerait sont statut dans la vignette, du genre ça :

Ce serait surement peu utile pour ceux qui ont peu de contenus (priorisation, tout ça).


Dans la catégorie des trucs méga chiant : on a deux pages pour lire ses contenus :

On en peut pas passer de l’une à l’autre (brouillon -> publication n’est pas possible), et si on donne la mauvaise, les gens ne peuvent pas lire. Je me fais régulièrement avoir.


Dans la page de brouillon, il y a plus de 10 éléments dans le sous-menu Actions de la barre à gauche. C’est illisible.


Pour la page de nouveau contenu, on en a déjà parler dans un sujet que je ne retrouve plus. Mais l’idée était de faire plus court, plus simple et de mettre intro et conclusion ailleurs, si je me souviens bien.


Pour la partie lecture, celle qui concerne le plus de monde, je la trouve très propre, et ne vois rien à dire. Je précise parce qu’elle semble oublié des messages au-dessus (peut être parce qu’il n’y a rien à dire dessus :D ), alors qu’elle est particulièrement importante.


PS : attention à la page qui liste les contenus. Il faut quelque chose qui marche à la fois pour les gens qui ont 2–3 contenus, et ceux qui en ont 53. Oui, j’ai 53 contenus… Et pas sûr que ça incluse les brouillons.

+4 -0

Pour la page de lecture il y a quelques points à améliorer, mais c’est principalement du détail, j’y reviendrai plus tard.


Je suis d’accord pour regrouper les contenus dans une même page, mais ça risque de devenir lourd pour les plus actifs et surtout un va perdre la différenciation entre les différents types de contenus.


Pour les filtres je pensais les grouper en haut de page, avec possibilité de les cumuler.

Une idée pourrait être d’ordonner les contenus pour afficher ceux qui sont en attente (non publiés, bêta, en validation…) d’abord, puis ceux qui sont publiés en derniers. Ça permettrait de faire remonter facilement les besoins d’actions aux auteurs.


Remonter les boutons pour créer des contenus en premier ça peut être sympa, mais je sais pas si ça va être pratique à l’usage. Surtout si on doit intégrer les filtres, ça fera beaucoup de choses à passer avant d’avoir accès à ses contenus. Sur petits écrans particulièrement ça risque de créer une friction supplémentaire.


Concernant les vignettes de statuts, le problème est qu’un contenu peut avoir plusieurs status (publié, en bêta et en cours de rédaction). C’est pour ça que j’utilise plutôt les boutons à droite de chaque bloc pour proposer des actions directement plutôt qu’une surcharge d’informations. Si le besoin c’est de filtrer… y’aura des filtres.


L’interface de gestion d’un contenu (brouillon ou autre) est surchargée, la sidebar est pas ergonomique, on sait pas ce qu’elle permet et c’est difficile de trouver une action précise du premier coup. J’aimerais bien me passer complètement de la sidebar pour afficher les actions directement là où elles font sens, en fonction du contexte.

Critique/amélioration de la maquette de Viki :

Je plussoie la suppression de la sidebar ! J’avoue que dans mes idées, elle est menacée, même si tout n’est pas encore parfaitement au point, pour recentrer sur le contenu Par contre je me demande (je sais que c’est qu’un premier jet) : est-ce vraiment nécessaire de donner tant d’importance aux boutons sociaux ? Source: Amaury

Je rejoins Amaury sur le fait de :

  • Enlever la sidebar ;
  • La présence des boutons des réseaux sociaux (j’ai l’impression que ça alourdi l’interface).

Ajouter un badge "En validation"

Je serais pour l’ajout d’un badge qui prévient si le contenu est en validation ou en attente de validation :

prop d'A-312 en se basant sur celle de Melcore
prop d'A-312 en se basant sur celle de Melcore

(log sur Discord)

Les cartes des tutoriels

Question: On continue encore sur un thème simpliste avec beaucoup de margin et de carte de tutoriel qui prennent de la place ?

On peut trouver des idées d’alternatives sur le web celle ci,

On obtiendrait par exemple :

Nouvelle carte pour les tutos
Nouvelle carte pour les tutos

Exploiter la page d’accueil

Je me demande si on ne devrait pas mettre sur la page d’accueil des connectés deux nouveaux encarts :

  • Vos contenus actifs : Tutoriel en cours de rédaction & Tutoriel avec un commentaire non lu ;
  • Tutoriel en beta : Mise en avant du forum "contenu en cours de rédaction" pour avoir plus de réponse.

Une idée pourrait être d’ordonner les contenus pour afficher ceux qui sont en attente (non publiés, bêta, en validation…) d’abord, puis ceux qui sont publiés en derniers. Ça permettrait de faire remonter facilement les besoins d’actions aux auteurs.

J’ai du mal à voir concrètement si ça passe bien ou pas. Quant tu feras des essais, fais-en un avec plus de 10 contenus en attente (j’en ai 13) pour voir si ça passe quand même.

+0 -0

Une idée pourrait être d’ordonner les contenus pour afficher ceux qui sont en attente (non publiés, bêta, en validation…) d’abord, puis ceux qui sont publiés en derniers. Ça permettrait de faire remonter facilement les besoins d’actions aux auteurs.

J’ai du mal à voir concrètement si ça passe bien ou pas. Quant tu feras des essais, fais-en un avec plus de 10 contenus en attente (j’en ai 13) pour voir si ça passe quand même.

Gabbro

Il y a des libs JS qui peuvent faire ça sans changement de page, ça serait une bonne intégration de filtre et c’est de l’instantanée :)

J’ai tenté de faire un dessin pour rendre plus concrètes les idées du premier post.

Je montre comment j’imagine la vue relecture, celle qui concerne la bêta. Je suis inspiré par l’interface de GitHub notamment, qui présente des onglets également.

image.png
image.png

C’est juste une idée. Notamment je ne suis pas fan d’avoir des "modes", mais ça permet de ne pas avoir trop d’infos à la fois. Il y a d’autres possibilités évidemment, c’est juste que je suis pas très au point sur les interfaces utilisateur. :D

Ça risque d’être très lourd si on cumule des onglets avec une sidebar.

Je sais pas trop si on beaucoup d’auteurs utilisent l’historique des versions régulièrement, est-ce que ça vaut vraiment le coup de la rendre si proéminente ?

Pareil pour le topic, un simple lien ferait le job, sans avoir à intégrer les onglets sur le forum (le principe des onglets étant d’être constants quand on passe de l’un à l’autre).


On va peut-être avancer étape par étape pour les maquettes, histoire d’éviter de toucher à toutes les pages d’un coup et tout mélanger ?

Pareil pour le topic, un simple lien ferait le job, sans avoir à intégrer les onglets sur le forum (le principe des onglets étant d’être constants quand on passe de l’un à l’autre).

Justement, l’idée est de ne pas se faire téléporter sur le forum. Tu vois directement le sujet du forum, mais sans être en mode forum.

On va peut-être avancer étape par étape pour les maquettes, histoire d’éviter de toucher à toutes les pages d’un coup et tout mélanger ?

On a bien deux idées différentes : l’espace de rédaction pour les auteurs et la liste des tutos. Moi je suis plutôt branché sur le premier, parce que le deuxième ne me sert pas à grand chose.

+0 -0

Je sais pas trop si on beaucoup d’auteurs utilisent l’historique des versions régulièrement, est-ce que ça vaut vraiment le coup de la rendre si proéminente ?

Auteurs, je ne pense pas. Validateur, si. D’ailleurs, si on peut exposer nos demandes indépendamment de la difficulté technique, permettre aux relecteurs de béta d’avoir accès au diff entre deux versions mises en béta serait un gros plus.


On va peut-être avancer étape par étape pour les maquettes, histoire d’éviter de toucher à toutes les pages d’un coup et tout mélanger ?

Au plus simple pour toi. Quelle page d’abord ?

+2 -0

Justement, l’idée est de ne pas se faire téléporter sur le forum. Tu vois directement le sujet du forum, mais sans être en mode forum.

Ça risque de faire lourd, de tout avoir sur la même page. À voir si ça peut pas être intégré dans un second temps ? Avec un bouton pour visiter le forum d’un clic en attendant…


J’ai commencé par la liste des contenus pour le moment, pour faciliter leur gestion et inciter les nouveaux à rédiger. On peux commencer par là vu que c’est une page assez légère au final.

L’interface de rédaction est un gros chantier, autant commencer par poser des bases communes pour travailler, on pourra ensuite les utiliser pour construire plus gros.

J’ai genre 15 articles de Recap communautaires, et deux séries de billets qui prennent beaucoup de place et rendent compliqué de trouver mes autres contenus. Pouvoir les organiser serait un luxe utile.

@Rockaround Pouvoir filtrer par tag (ça pourrait presque se faire en front) ça t’irait ? Ou tu voudrais vraiment ajouter une gestion de dossiers juste pour l’auteur ?

viki53

Ca m’irait aussi, de pouvoir définir mes propres tag et les utiliser pour filtrer. La solution technique ne m’importe au final que peu, tant que je peux facilement afficher ceux que je veux. Et je suis d’accord avec Aabu, qu’on mélange deux pages ici, et qu’on devrait soit créer un second sujet, soit parler de l’une, puis de l’autre quand la première est finie, pour ne pas se mélanger les pinceaux.

Justement, l’idée est de ne pas se faire téléporter sur le forum. Tu vois directement le sujet du forum, mais sans être en mode forum.

Ça risque de faire lourd, de tout avoir sur la même page. À voir si ça peut pas être intégré dans un second temps ? Avec un bouton pour visiter le forum d’un clic en attendant…

Oui, on peut faire de solutions intermédiaires. C’est pour ça que je parlais je-ne-sais-plus-où de choses faisable par petites touches, avec des étapes intermédiaires, pour que le développement soit pratiquable. Là, tu es déjà dans le domaine de la planification, mieux vaut parler des idées d’abord.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte