Discourse & Canonical Ubuntu: UX とビジュアルの探求

みなさん、こんにちは。

私はクラウディオで、Canonical(Ubuntu の出版社)で UX リーダーを務めています。これは Meta Discourse 上での初めての投稿ですが、Canonical 内のウェブサイトや製品のコミュニティフォーラムでは、私たち全員が Discourse を利用しています。

先日、Discourse を既存のウェブサイトのサブドメイン(例:‘discourse.ubuntu.com’)ではなく、メインドメインに組み込んだ場合の外観について検討しました(例:‘ubuntu.com/discourse’ へ移行する形です)。

サブドメインではなくトップレベルのウェブサイトを使用する場合、Discourse のナビゲーション、インタラクション、そして全体的な見た目を、一貫性がありシームレスに統合するために変更する必要が出てきます。これは既存の UX の複数の部分に影響を与える探索的な作業であることを理解していますが、それでもこの情報を共有し、これらの変更の一部がアップストリーム向けの提案(テンプレートとしてなど)として関心を集めたり、有効な案たりする可能性があるか、議論できればと考えています。

スタイル面では、オープンソースの CSS フレームワークである Vanilla とそのコンポーネントを採用しています。

この導入への返信として、すべてのビジュアルをここに投稿していきます。
ご意見をお聞かせください。さらに詳しく議論したり、追加で相談したりすることも可能です。

よろしくお願いいたします!

「いいね!」 14

Discourse のナビゲーション

サインアウト版

提案では、デフォルトの Discourse に付属するバーガーメニューを削除し、すべてのページへの主要なエントリーポイントとしてサイドナビゲーションコンポーネントを使用しました。その理由は、既存の Web サイトのナビゲーションに Discourse を追加する際に、既存の Web サイトの構造と一貫性を持たせる必要があるためです。これにより、利用可能なすべてのページとトピックを、常に表示される 1 つのナビゲーションコンポーネントでユーザーに直接公開することもできます。

検索機能は Web サイトのグローバルナビゲーションに統合されており、Discourse の検索結果も含まれます。これには重要なフロントエンドおよびバックエンドの変更が必要となる可能性があるため、検索入力フィールドを Discourse ページ内に移動してスタンドアロン化することも検討できます。

「いいね!」 10

Discourse のナビゲーション

ログイン後のナビゲーション

ユーザーがログインすると、「新しいトピック」のアクションボタンと、左側のサイドナビゲーションにある「アカウント」項目が表示されます。

「最新」「新規」「未読」「人気」「カテゴリ」「ブックマーク」をページの上部にすべて表示するのではなく、カテゴリをサイドナビゲーションに配置し、残りの項目はドロップダウンメニューに配置して、ユーザーがコンテンツの表示ビューを選択できるようにします。

「いいね!」 7

すべてのトピックの表

すべてのトピックを表示する際の表を再編成しました。カテゴリは色付きのタグで表示され、ユーザーはそれをクリックして特定のトピックに直接アクセスできます。ユーザーのプロフィール画像や複数のユーザーは、スペースを節約するために視覚的に折りたたまれています。返信数、閲覧数、アクティビティは引き続き表示されます。

「いいね!」 7

トピック内

トピック/カテゴリ内では、「フォロー」の呼び出しアクションが表示されます。ドロップダウンメニューから、ユーザーは受け取りたい通知のレベルを選択できます。当社の提案では、ドロップダウンにラベルを表示し、ユーザーがそのトピックへの購読状況を容易に理解できるようにします。

「いいね!」 8

特定の時刻を表示

表示上部メニューから「トップ」を選択すると、「すべて」のドロップダウンから表示する時間の範囲を決定できます。

「いいね!」 6

記事の表示

「いいね!」 5

About ページ

ログインしている場合、ユーザーのプロフィール画像と情報が上部に表示されます。About ページでは、サイドナビゲーションにセカンダリページが展開され、「All topics」は折りたたまれます。ログアウトしている場合、About ページのレイアウトは同様ですが、上部にプロフィールと「account」は表示されません。

「いいね!」 5

アカウントページ

Discourse の横メニュー項目はサイドナビゲーションバーに含まれています。「サマリー - アクティビティ - 通知 - メッセージ - バッジ - 設定」。サブページのメニュー項目は、関連するメイン項目の下で開きます。例:アクティビティ > すべて、トピック、返信、下書き、いいね、ブックマーク。

ご意見をお聞かせください。さらに詳しくご議論できる機会があれば幸いです。

ありがとうございます!

「いいね!」 7

ご説明からすると、ここにある画像が間違っているのではないでしょうか?

「いいね!」 3

「Latest」のヘッダーだけが誤っていますが、それ以外は良好です。:slightly_smiling_face:

「いいね!」 6

「フォローオプション」の呼び出しとドロップダウンが表示されません:

それ以外については、デザインは素晴らしいです!

「いいね!」 4

あまり強い呼びかけではありませんが、「フォローオプション」のドロップダウンは「新しいトピック」ボタンの隣にあります。

「いいね!」 4

現状は良いですが、左側のメニューがメインコンテンツと視覚的に混ざってしまっています。Stack Overflow のように、背景、インデント、色などを調整して区別できないでしょうか。選択肢はたくさんあります。

「いいね!」 2

皆様のご返信をありがとうございます。
はい、「フォローオプション」のドロップダウンはこれです:

この作業を進めている間に、Discourse の通知/フォローアイコンが変更されたことに気づきました(現在は非常に明確になり、より良くなりました)。そのため、これに合わせて更新する必要があります。

「いいね!」 8

テーマクリエイターにテーマをアップロードしていただくことを歓迎します!

実際に操作してフィードバックを提供できることを楽しみにしています。フラグ UI やブックマーク UI など、おそらく確認が必要な隠れた UI エレメントもいくつかあります。

「いいね!」 5

素晴らしいですね!ただ、ここには通知が反映されていないようですが…

Screen Shot 2020-05-21 at 8.48.48 PM

これらはサイドバーの「アカウント」リンクと一緒にリストされるのでしょうか?

また、タグが表示されていないことから、タグを使用する予定はないと推測しますが…それこそが、専用のカテゴリ列を廃止した理由の一つでした。

タイトル下にカテゴリを配置することで、カテゴリとタグを密接に関連付けるとともに、各トピックページの上部にあるタイトルレイアウトとの一貫性を保つことができます(デザインを確認したところ、トピックに入るとカテゴリが表示されなくなっていますが、これは意図的なものですか?)。

例えば、Screen Shot 2020-05-21 at 8.59.49 PM のように。

「いいね!」 6

@sam ありがとうございます。ガイドを確認いたします。確かに、現在の UI の問題点や見落としがちな部分を明確にするには、ある種のプロトタイプがあると役立つでしょう。

「いいね!」 2

@awesomerobot 返信ありがとうございます。
メインドメインの下に Discourse を配置する際(例えば meta.discourse ではなく The easiest way to host a Discourse community | Discourse - Civilized Discussion のように)、メインサイトのアカウント/プロフィール画像と衝突する可能性があるため、ユーザー画像を削除する必要がありました。
私たちがこのソリューションを検討した際、タグは存在していなかったと思われますので、これは後続の作業で追加すべき事項です。タイトルの下にカテゴリを表示するのは非常に良い点ですね。

皆様からのフィードバックに感謝します。これらのデザインの後続作業に役立てます。

「いいね!」 1