web-dev-qa-db-ja.com

キャンバス外のスライドアウトメニューを左上ではなく右下に配置すると使用できますか?

CSSフレームワーク(Toast、Yaml、Bootstrap、Foundationなど)に入るときに、小さな画面で表示したときにナビゲーションメニューの使いやすさに夢中になりました。

"ドロップダウン"

dropdown

"洗練されたドロップダウン"

sophisticated dropdown

"offcanvasメニュー"

offcanvas menu

使いやすさの点では、私はoff-canvasメニューを次の要因のために好むかもしれません:

  • HTMLドロップダウンよりもわかりやすい
  • 洗練されたドロップダウンとは異なり、下にスクロールしないナビゲーションアイテムを表示しても、ページコンテンツはまだ部分的に表示されています

さて、これが私の質問です: "RIGHT"キャンバス外のナビゲーションは良いUXですか?

Parham Aarabi の記事に基づいています:

通常、アプリケーションUI要素は、アプリの下部(最も一般的)または上部に配置されます。

ただし、ほとんどのユーザーが電話を握る方法は、親指をボタンに触れる主要な指として使用することです。ユーザーが右利きの場合、親指は画面の右下(または左利きのユーザーの場合は左下)の領域に到達しやすくなります。ユーザーが画面上に到達する必要があるため、親指とは反対側の画面上部のコーナーに到達することははるかに困難であり、アプリケーションフローの邪魔になります。

enter image description here

それで、その原則はウェブのUI要素(ナビゲーション)にも適用できますか?

"RIGHT"キャンバス外のナビゲーションを使用することをお勧めします。 enter image description here ビューポートの「右下」にあるボタン?これは認識できるようですか?

どんな考えでも大歓迎です。

3
Vincent

一方で、右下のコントロールは、右親指でターゲットを設定する方が簡単です。一方、ハンバーガーボタンはキャンバス外メニューとも呼ばれ、従来は左上に配置されていました。したがって、問題は「どちらがより重要で、ターゲティングの容易さか、文化的慣習か」です。

ドンノーマンの言葉を見てみましょう。

「慣習は文化的な制約であり、時間とともに進化してきました。慣習は恣意的ではありません:慣習は進化し、実践のコミュニティーが必要です。遅い言葉は自発的な選択を意味しますが、実際には、それは私たちの行動に対する実際の制約です。違反する "(私の強調)

--Don Norman、アフォーダンス、コンベンション、デザイン(パート2) ;参照 アフォーダンスとデザイン

これは、すべての新しい設計が過去の規則に従う必要があることを意味しません。新しい動作に変更することの正味の利点がコストを上回る場合、設計者は慣習を破る必要があります。

したがって、現在のケースでは、数百万人のユーザーの筋肉の記憶に住んでいる文化的に条件付けられた行動を変更するコストに対して、改善されたターゲティングの利点を比較検討しています。確立された習慣と期待を変えるために必要な時間と労力を考えると、ハンバーガーボタンを移動しても、全体の使いやすさが向上する可能性は低いです。

さらに、メニューの呼び出しが頻繁でない場合は、メニューのエントリポイントを移動して不動産をプライムすると、同じスペースのより重要で頻繁なコントロールが奪われます。 (:上記のターゲティングヒートマップは右手に固有です。左手用のホットスポットは左下にあります。)

2
akarve

IOSでヘッダーの左側にハンバーガーアイコンと戻るボタンを配置すると、すべてのナビゲーション機能を1か所にグループ化したい場合に便利です。ヘッダーの右側には、編集やフィルタリングなどの他の機能が表示されます。

ユーザーが1つの画面で、前に戻って、すべてのメニューカテゴリ(ハンバーガーアイコン)を表示し、結果を検索してフィルター処理できるとします。私の考えでは、ハンバーガーアイコンと検索アイコンおよびフィルターアイコンを混在させることはお勧めできません。同様の機能をグループ化する必要があるため、左側にナビゲーション機能を表示し、右側にフィルターおよび検索オプションを表示する必要があります。

0
steppenwolf