ハンバーガー切り替え

こんにちは、Discourseは初めてなのですが、これは役立つ観察だと思います。ハンバーガーメニューが「閉じる」UIに変わることがないので、もっと何かを表示しようとしていると思ってクリックしてしまうのですが、予期せず閉じてしまいます。すでに開いていたのに。アクセス権が増えたら「テーマコンポーネント」カテゴリにトピックとして追加する予定のCSSがいくつかあります。幸いなことに、コードベースには適切なクラスがあるので、サイドバーが表示されているかどうかに基づいてそれらにフックできます。

discourse-hamburger-toggle

.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle  svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}
「いいね!」 4

ありがとうございます!X閉じるボタンをメニュー自体の一番上に移動させることも提案したいと思います。(その位置には、「メニューを閉じる」というテキストをボタンに追加し、Xの代わりに左向きの矢印を使用することも検討してください。)

← メニューを閉じる または << メニューを閉じる

「いいね!」 4

多くの人は、サイドバーが常に有効になっている状態でDiscourseを使用していると思います(さまざまなフォーラムの統計を見てみたいです)。多くのユーザーにとって基本的に永続的なレイアウトの一部を閉じることを奨励するような大きなXは、私には少し奇妙に見えます。:thinking:

「いいね!」 3

ウィンドウの最も価値のある左上のターゲットスペースを、ほとんど使用されないハンバーガーから閉じるアイコンが占めているのは最適ではないことに同意します。

Cloudflare がサイドバーの下部にあるものは次のとおりです。

CSS(あるいは DOM?)について私よりも詳しい人がテーマコンポーネントをすぐに作成できるかもしれませんが、おそらくテンプレートを修正する PR が必要でしょう。

サイドバーの最初の項目にすることもできます。

「いいね!」 3

折りたたまれたサイドバーにボタンがある場合、再度開くにはどうすればよいですか?

「いいね!」 2

おっと!
本当に良い点を突かれました!

私はUXの専門家だとは言っていません。

. . . うーん . . . OK

彼らはサイドバーをこのように折りたたむのです。

そして、一番下のものがそれを展開します。

ですから、サイドバーを削除するのではなく折りたたむことが解決策になるかもしれません。そうすれば、アイコン/色を知っていれば、展開しなくても使用できます。

ほとんどすべてのサイトで、ホーム/アイコンは左上に配置されており、そこにハンバーガーがあるのは間違っているように思えます。

「いいね!」 3

これは違うことだとわかっていますが、モバイルではサイドバーのアイコンが右上にあるままだと推測しています。なぜなら、小さなタッチスクリーンでは、デスクトップ表示のように左上にあると、誤ってロゴをタップしてしまうことがよくあるからです。ただし、アバターや検索アイコンの近くにある場合も同様のことが言えます。:woman_shrugging:t2:

「いいね!」 1

はい、それは理にかなっています。Googlemailにも同様のものがありますが、ハンバーガーボタンは左上にあります。

「いいね!」 2

このテーマでは、ハンバーガーメニューがサイドバーに表示されているため、厳密には左上隅ではありません。

「いいね!」 2

FWIW、UXデザインのバランスと見た目では左上が好みで、その開閉機能にも問題はありません。

「いいね!」 1

以前はあまり触ったことがありませんでしたが、「ホバーで展開」する機能もあり、これはかなり良いですね。

メタ社のものよりも、アイコンがより特徴的なセットになっているため、折りたたまれた状態でも、メタ社のものを見た最初の印象よりも分かりやすいと思います。ただし、複数のラベルなどを追加し始めると、タグと同じような曖昧さが出てきてしまいます。

「いいね!」 1

ホバータグやカテゴリ名については、タッチスクリーンインターフェイスでもホバーは理想的ではありません。iPadでホバー機能が有効なデスクトップモードを使用しても、あまりうまくいきません。

「いいね!」 1

マウス操作と同様に、画面タップでも同じように動作するのであれば、ホバー機能は気に入っています。

以下は、クライアントのために構築した、高度にカスタマイズされたGhost CMSサイトでの私のお気に入りのスタイルの1つです。サイドバーのどこかにカーソルを合わせると、縦に並んだクリック/タップ可能なリンクがスライドして開き、階層化されたサブメニューが表示されます。非常にスムーズでナビゲーションしやすい操作感です。こちらで試すことができます。

モバイルで確認しましたか?バグが多いです。

こんにちは:wave: 共有ありがとうございます。

サイトのサイドバーのトグルにインデント、アウトデントのアイコンの組み合わせを使用しています。

indent (サイドバーを表示)
indent-solid

outdent (サイドバーを非表示)
outdent-solid

「いいね!」 2

デスクトップの別の可能性は、Flarumで実演されています…

コアチームが対応すべきだと考える人は他にいるでしょうか?

それにより、多くのトップコミュニティがDiscourseで以前のUI(サイドバーなし)を使用しています。

サイドバーは、私たちのような大規模なコミュニティを整理するのに非常に役立つと思いましたが、Discourseでの現在の動作はその逆です。

このような小さくも重要な詳細により、技術者ではない人々が私たちのフォーラムの使い方を知らないように感じます。

改善の余地は常にあります :slight_smile:

その間、このテーマコンポーネントをテストしています。

「いいね!」 2

私も同じ質問があります