web-dev-qa-db-ja.com

「ハンバーガーメニュー」を右側に配置すると、メニュー項目も右揃えになりませんか?

ハンバーガーメニューがネイティブアプリとウェブアプリケーションの右側にあることは明らかです。少なくとも私たちのコミュニティは、質問に(投票を通じて) ハンバーガーメニューアイコン-左または右にあるべきですか? これが事実であると結論付けました。

それは約だからです。ユーザーの67%が右親指(つまり、右手)を使用しており、いくつかの調査で、この手の姿勢が左上にあると画面領域に到達するのがより困難であることが証明されています。

同じ理由で、メニュー項目を右揃えにしないと、メニューをナビゲートしやすくなりますか?完全なメニュー項目領域は選択可能かもしれませんが、常に明白であるとは限りません(そして常に実装されるとは限りません)。または、ここで何か見逃していますか?

enter image description hereenter image description here

7
Benny Skogberg

読みやすさの観点から、少なくともテキストが左から右に読まれる国では、右のテキストを揃えないように強くお勧めします。それは本を読むのと同じです。もしそれが正しく配置されていれば、すべての行の始まりを探すことによってあなたの目はすぐに疲れます。画像を参照してください:

menu example

また、ユーザーが探しているものがわかっている場合は、一致するものが見つかるまで最初の文字をスキャンするだけです。これは、正しい例でははるかに困難です。

スクロールしながらメニューの一部を覆う左利きのユーザーの場合、左端にアイコンを配置することで解決できます。読みやすさを向上させ、指のためのスペースを作ります。例を参照してください。

menu with icons example

9
adam

スクリーンショットのように、メニューが画面全体に表示される場合、左揃えで問題ありません。より自然で、ユーザーはそれに慣れています。そしてロブが言ったように、親指はメニューテキストを妨げません。

ただし、メニューが右側の縦画面の半分以下しか占めない場合は、右揃えがより美しくなります。

おそらく、このテキスト配置の異常のため、画面の半分にメニューを表示する多くのアプリが左半分を選択し、ボタンをアクセスしにくい左上隅に置いています。

関連する答え

1
kBisla

大多数のユーザーは左から右に読むため、ナビゲーション要素を左揃えにすることが重要です。

使いやすさのための最良の方法は、ハンバーガーメニューを右にフロートさせる(または中央を揃える)ことで、メニューの全幅を展開し、各全幅のメニュー項目をクリックできるようにします。これは、あらゆる場所でのアクセシビリティの向上を証明します。

私たちは最近、今週ローンチしたウェブサイトに同様のものを実装しました。

ハンバーガーメニューはデフォルトで折りたたまれ、中央揃えになっています。

hamburger menu collapsed

ハンバーガーメニューが拡張され、全幅のメニュー項目のテキストが左揃えになります。 hamburger menu expanded

1
zigojacko