ユーザーメニュータブのレイアウト改善

これらの素晴らしいメニューができあがった今、見た目をさらに良くする方法について何か考えはありますか?特にモバイルではスペースが余っているように感じられ、それによってクリックターゲットも小さくなってしまっています。

モバイル

デスクトップ


例えば、このようなのはどうでしょうか?

これならクリックしやすく、読みやすくなるかもしれません。余分なスペースがあるため、まずはモバイル限定の実験として始めてみるのはどうでしょう?

これを説明するための別のサイトからの視覚的例

デスクトップでこのレイアウトに十分なスペースがない場合は、以下のように 3 行 3 列のレイアウトにするのはどうでしょうか?

「いいね!」 17

最初のタブには確かに気に入っています。そこで実験を始めてみませんか?

「いいね!」 9

私にとって最大の課題は、最初のタブのモバイルにおけるクリックターゲットです。そこでの間隔を単純に調整することで、この問題の大部分を解決できるかもしれません。

@awesomerobot のご意見が気になります。広すぎる空白スペースは確かに少し過剰だと思います。

「いいね!」 10

大きな変更には反対しませんが、2カラムにするのは非常に簡単な改善です。

「いいね!」 15

モバイル版では、より大きな変更が必要だと考えます。

「いいね!」 12

このような見た目になると嬉しいです。 :slight_smile:

参考までに申し上げますと、最初のタブでは使い勝手に関する問題は経験していません。そのタブを頻繁に使うわけではないですが、使った際に誤ってクリックした覚えはありません。

これは良い案だと思いますが、ログアウトボタンを他の要素から分離した方がよいかもしれません。私の理解では、そのメニューにオプションを追加できるようになっているはずですが、ログアウトボタンが左側から右側(あるいはその逆)に突然移動すると混乱を招く可能性があります(頻繁に変更されるわけではないとしても)。


私にとって最も不自然なのは、@rishabh が当初指摘していたように、すべてのタブでモバイル画面に目立つ空白の垂直スペースがあることです。

「いいね!」 7

@rishabh のモックアップに基づいた 2 つのオプションです。3 カラムに傾いていますが、テキストのスペースが限られます(「匿名モードに入る」は短縮可能で、デフォルトではオンになっていません)。編集:考えてみると、単語が長い異なる言語圏では、2 カラムの方が安全かもしれません。

「いいね!」 10

"匿名モードに入る"は、右下に「ログアウト」と同様のテキストとして表示されます。

デザインについては、3 列目のスタイルのコンパクトな見た目を少し好みます。

ここでの問題はモバイル版にあると思います:

大きなボタンでも機能するかもしれませんが、その場合はログアウトを下部に移動させて全幅にするかもしれません……わかりませんね……

全体として、デスクトップ版は現状でまあまあ大丈夫な感じです。

「いいね!」 8

デスクトップは大丈夫です。これはモバイル限定の変更だと思います。

「いいね!」 8

新しいトピックですか?この議論は、完了した(素晴らしい)クイックアクセスのトピックから外れているように見えます。最新の提案の影響も受けません。

なぜこれらの最新の変更が必要なのか、私にはわかりません。しかし、「モバイルではより大きな変更が必要である」という理由が、別の場所で提示されているのに見逃しているのかもしれません。

  • デスクトップとモバイルのメニューを同じにしているのが好きです。両方使用しており、脳の負担が少なくて済みます。
  • 多列レイアウトは一般的に読み取りが遅くなります。アイコンは便利ですが、ボタンが追加されたり削除されたりする場合はそうでもありません。
  • ランディングスペースが縦方向に不足している場合、それはすでにドロップダウンメニューの横方向の幅です。それなら、すべてのメニューにアイコンボタンを設定しないのはなぜでしょうか?
  • 空白の白いスペースを埋めることが主な目標だと推測します。提案されている大きなボタンよりも、他の機能で妥協します:
    • 各投稿の下の「返信」ボタンに合わせるための文字サイズを大きくする
    • 招待、バッジなどのより多くのメニューオプション
    • 何らかの区切りでオプションをグループ化:ユーザーメニューオプションをユーザーサマリーと同じ順序で一緒に配置する;下書きは単独で;ログアウトは最下部に単独で配置する;
    • 統計
「いいね!」 8

はい、私も一貫性を重視する傾向があります(保守も楽です)。ただ、タップ操作とクリック操作は体験が異なるため、場合によっては異なるレイアウトが適していることもあります。

項目数が非常に少ないため、これはあまり気にしていません。

そうすべきかもしれませんね。どこから始めるかといえば、まずはそこからでしょう。将来的にはハンバーガーメニューもアイコン化できるかもしれません。

ユーザーメニューのタブとの整合性を取るために、これには反対しません。ただし、バッジや招待はこの文脈では重要ではないように思われます(バッジはすでにハンバーガーメニューにありますし、ほとんどの人は招待機能を使っていません)。そのため、役立つというよりはむしろノイズになる可能性があります。

6〜7項目しかない場合、これは意味がありません。

もしかしたら私の理解が間違っているかもしれませんが、すでに同じ順序になっています(下書きと匿名モードはユーザーページに完全なタブを持っていないため、それらが少し順序を崩しています)。

これも頭に浮かびましたが、現時点では避けておきたいと考えています。現在、これらのメニューはすべて「どこかへ移動する」または「何かを行う」ためにクリックできる要素だけで構成されています。純粋な情報コンテンツを配置するのに適切な場所かどうかはわかりません。

「いいね!」 8

これは少し厄介です。というのも、このメニューには多くても7〜8項目しかなく、iPhone Xに収めることと、古いiPhoneやAndroidに収めることでは事情が異なるからです。スペースの有効活用という点では、2カラムのボックスの方が優れていると思いますが、大型スマートフォンではまだ余白が残ってしまいます。

非常に凝った方法として、ビューポートの高さに応じてこれらのボックスを動的にリサイズすることも可能です。スペースを埋め、タップターゲットを極めて操作しやすくすることが目的であれば、さらに大胆なアプローチも考えられます。これはおそらく極端すぎるかもしれませんが、大きくしてもまだ余白が残ることがわかります。

片手で操作しやすいようにしたい場合、理想的にはこのメニュー全体を画面下部に配置すべきです(このレイアウトではタブスタイルはあまり適していませんが、あくまで簡単な例です)。ただし、コンテンツの方向性を考えると複雑になってきます(メニューが下部にある場合、リストも下部から始まるべきでしょうか?これは大きな問題の山になります)。

まあ、少し話が脱線しましたが…2カラムのアイコンボックスから始めるのが良いと思います。スペースの有効活用と、操作のしやすさ向上という目標をよりよく達成できます。

「いいね!」 14

スペース全体を埋めようとする代わりに、必要な分だけメニューのサイズを調整し、全高を使用しないのはどうでしょうか。デスクトップではすでに高さが動的に変更されています。モバイルでも同じようにしない理由はあるのでしょうか?

フル高さは、モバイルアプリの「フル高さでスワイプ可能なメニュー」というパターンに従っています。フル高さでなければ、スワイプして閉じられることが明確に伝わらないと思います(少なくとも、追加の余白は追加のスワイプ領域として機能します)。

「いいね!」 9

これは大きな改善になるでしょうし、そのような前例があるのも気に入っています。(現在の状況が悪いという意味ではありませんが。)

「いいね!」 4

ユーザーが下書きを確認する頻度が、通知、ブックマーク、メッセージと同様にメニューに独立したタブを設けるほど十分高いでしょうか(プロフィールタブではなく)。通知に比べて使用頻度は比較的低いと思われますが、ブックマークとの比較はどうなるでしょうか。直近のメニュー変更でユーザーメニューのプロフィールセクションに配置されるまで、すべての下書きを確認できること自体を知らなかったため、さらに目立たなくする方がよいのか疑問に思います。

「いいね!」 1

ブックマークはまもなく劇的に便利になります。

「いいね!」 10

こんにちは、Kris @awesomerobot さん。UX に関するご尽力に感謝します。

2 列のレイアウトは素晴らしいですね。
また、@seanblue さんが提案された下書きの目立つ位置も良いアイデアだと思います。完全に見過ごしていました… 便利なのに、現時点では隠れてしまっています。
ユーザーメニューの左側がクリック可能かどうかを確認するために、多くのユーザーが左側まで移動することはないかもしれません。右側の 3 つのタブが私の注意を完全に引きつけているからです。

その辺りでコーディングされているかもしれませんので、リストに個別の CSS クラスを追加していただけませんか?現在はすべて class = “read” になっています。いくつかを非表示にしたいのです。
ユーザー同士が見えない、少し変わった個人向けクライアントフォーラムを構築しています。@joebuhlig さんがテーマで試みているような感じです。
よろしくお願いいたします。