Je m’appelle Claudio et je travaille en tant que responsable UX chez Canonical, l’éditeur d’Ubuntu. Ceci est mon premier post ici sur Meta Discourse, mais nous utilisons tous Discourse pour les forums communautaires de nos sites web et produits chez Canonical.
Il y a quelque temps, nous avons exploré à quoi Discourse pourrait ressembler s’il était intégré dans le domaine principal d’un site web existant, plutôt que sur un sous-domaine (par exemple, passer de ‘discourse.ubuntu.com’ à ‘ubuntu.com/discourse’).
L’utilisation du site web principal au lieu d’un sous-domaine modifierait nécessairement la navigation de Discourse, ses interactions et son apparence générale afin d’être intégré de manière cohérente et transparente. Nous comprenons qu’il s’agit d’un travail d’exploration qui affecterait plusieurs parties de l’UX existante, mais nous avons pensé partager cela avec vous de toute façon et éventuellement discuter si certaines de ces modifications pourraient intéresser ou constituer une proposition valable (peut-être comme modèle ?) pour l’amont.
Sur le plan du style, cela utilise notre framework CSS open-source Vanilla et ses composants.
Je vais publier tous les visuels ici, en répondant à cette introduction initiale.
Veuillez nous faire part de votre avis, nous serions disponibles pour en discuter davantage ou plus en détail.
Dans notre proposition, nous avons supprimé le menu burger fourni par défaut avec Discourse et utilisé un composant de navigation latérale comme point d’entrée principal pour toutes les pages. La raison en est que l’intégration de Discourse à la navigation existante d’un site web nécessite une cohérence avec la structure actuelle du site. De cette façon, nous pouvons également exposer aux utilisateurs toutes les pages et tous les sujets disponibles directement dans un seul composant de navigation, toujours visible.
La fonctionnalité de recherche est intégrée à la navigation globale du site web et inclurait également les résultats de recherche provenant de Discourse. Comme cela pourrait nécessiter des modifications importantes côté front-end et back-end, le champ de saisie de la recherche pourrait être déplacé vers les pages Discourse pour être autonome.
Lorsque les utilisateurs se connectent, l’appel à l’action « nouveau sujet » devient visible, ainsi que l’élément « compte » dans la navigation latérale gauche.
Au lieu d’afficher « Derniers », « Nouveaux », « Non lus », « Meilleurs », « Catégories » et « Favoris » tous ensemble en haut de la page, nous pouvons placer les catégories dans la navigation latérale et le reste dans un menu déroulant où les utilisateurs peuvent choisir la vue du contenu qu’ils souhaitent voir.
Nous avons réorganisé le tableau lors de l’affichage de tous les sujets. Les catégories sont affichées via des étiquettes colorées sur lesquelles les utilisateurs peuvent cliquer pour accéder directement à un sujet spécifique. La photo de profil des utilisateurs et les multiples utilisateurs sont visuellement réduits pour gagner de la place. Les réponses, les vues et l’activité restent visibles.
Dans un sujet ou une catégorie, l’appel à l’action « option de suivi » s’affiche. Grâce à un menu déroulant, les utilisateurs peuvent choisir le niveau de notifications qu’ils souhaitent recevoir. Notre proposition affiche l’étiquette dans le menu déroulant afin que les utilisateurs puissent facilement comprendre leur abonnement à ce sujet.
En sélectionnant « En haut » dans le menu supérieur de la vue, les utilisateurs peuvent décider quelle partie de la période afficher via la liste déroulante « toute la période ».
Lorsqu’un utilisateur est connecté, sa photo de profil et ses informations s’affichent en haut. Sur la page À propos, les pages secondaires se développent dans la navigation latérale, tandis que « Tous les sujets » se réduit. Si l’utilisateur n’est pas connecté, la page À propos reste identique, mais la photo de profil en haut et l’onglet « compte » ne sont pas affichés.
Les éléments du menu horizontal de Discourse sont inclus dans la barre de navigation latérale : « Résumé - Activité - Notifications - Messages - Badges - Préférences ». Les éléments du menu des sous-pages s’ouvriront sous l’élément principal correspondant, par exemple : Activité > Tout, Sujet, Réponses, Brouillons, J’aime, Favoris.
N’hésitez pas à nous faire part de votre avis, nous serions disponibles pour en discuter plus en détail.
Les choses se passent bien. Mais le menu de gauche se fond visuellement dans le contenu principal. Voyez si vous pouvez le séparer comme sur Stack Overflow, par exemple. Peut-être en ajustant l’arrière-plan, l’indentation ou la couleur. Il y a beaucoup d’options.
J’ai remarqué que depuis que nous avons travaillé là-dessus, Discourse a modifié les icônes de notification/suivi (beaucoup plus claires maintenant, je dois le dire), nous devons donc mettre cela à jour en conséquence.
N’hésitez pas à télécharger votre thème sur le créateur de thèmes !
J’aimerais beaucoup naviguer et vous faire part de mes impressions sur la sensation d’utilisation. Il y a pas mal d’éléments d’interface cachés que vous devrez probablement examiner également, comme l’interface des signets et celle des favoris, etc.
Cela a l’air super ! Une chose qui ne semble pas être représentée ici, ce sont les notifications :
Celles-ci seraient-elles listées à côté du lien « compte » dans la barre latérale ?
Par ailleurs, je suppose qu’il n’est pas prévu d’utiliser des étiquettes, car je ne les vois pas représentées ici… c’était l’une des raisons pour lesquelles nous avons abandonné la colonne catégorie dédiée.
En plaçant la catégorie sous le titre, nous pouvons maintenir une association étroite entre les catégories et les étiquettes, tout en restant cohérents avec la mise en page du titre en haut de chaque page de sujet (je viens également de remarquer que, dans votre conception, la catégorie n’est pas affichée une fois que vous accédez à un sujet : est-ce intentionnel ?).
Merci @sam, nous allons examiner le guide. En effet, une sorte de prototype aiderait à mettre en évidence les problèmes et les parties négligées de l’interface utilisateur actuelle.
Merci pour votre réponse @awesomerobot. En déplaçant Discourse sous le domaine principal (par exemple, The easiest way to host a Discourse community | Discourse - Civilized Discussion et non meta.discourse), nous avons dû supprimer l’image de profil car elle pouvait entrer en conflit avec celle déjà utilisée pour le compte ou la photo de profil du site principal. Je pense que les balises n’étaient pas disponibles lorsque nous avons exploré cette solution, c’est donc un élément à intégrer dans une étape ultérieure. Les catégories sous le titre sont en effet une excellente remarque.
Merci à tous pour vos retours, ils nous aideront à poursuivre le travail sur ces conceptions.
