web-dev-qa-db-ja.com

ハンバーガーメニューでは、「ログアウト」が常に一番下にある必要がありますが、その理由は何ですか。

ログイン/ログアウトが必要なWebサイトを使用しているときにこれに気づきました。メニューの下部にある[ログアウト]ボタンにアクセスするのに慣れています。例えば:

general layout of extended menu

ハンバーガーメニューでは、logoutオプションは常に一番下にあり、通常、メニューの一番上の行はほとんど「詳細」または「アカウント情報」です。 」

昨夜、Steamのウェブサイトを開き、「>」ボタンをクリックしてメニューを拡張しました。レイアウトが少し違っていて、反射で「ログアウト」ボタンを誤ってクリックしました。これは、習慣により、最初の行にリンクがあるため「詳細」メニューだと思ったためです。これがスクリーンショットです:

enter image description here

そうです、私はこの種のメニューの一番上にある「ログアウト」ボタン/リンクに慣れていません。それは私に不思議に思った、私の質問は:

行のあるメニューの「ログアウト」ボタンのこの位置の基本理論は何ですか?出口標識が表示されているため(技術的に)、常に「終了」する必要がありますか?そして、例えば、Steamウェブサイトが「ログアウト」ボタンを反対の位置に配置するのはなぜですか?それは他の習慣や傾向と関係がありますか?

PS:私の英語を許しなさい、私は限られた文法で私の考えを明確に表現しようとします。

38
corgiiscute

Steamはこの問題に気付いていないようです。

ドロップダウンの下部にログアウトボタンを配置するいくつかの理由を次に示します。

  • 偶発的なログアウトを回避する-リストの一番上にログアウトを配置すると指摘したように、要素をダブルクリックするために使用されているユーザーに誤ったログアウトを作成する可能性があります。
  • 標準に従う-インターネットを閲覧すると、ユーザーは、ウェブページのさまざまな要素に対して、筋肉の記憶などの何かを持ち始めます。あなたのケースでは、ログアウトがユーザーコントロールリストの一番下にあるという期待(筋肉の記憶)が生まれました。ほとんどのサイトがこの標準を採用しているため、偶発的なログアウトを避けるために、この標準に従う必要があります。
  • リストの上部と下部が最も表示されます-リストがある場合、最も表示される要素は上部と下部の要素です(- ここを参照 )。
  • 意味-ユーザーがログインした場合、通常、ログアウトは特定のタスクの終了であるため、ログアウトオプションを最後としてリストすることは理にかなっています。
46

破壊的なボタンを見つけにくくする

破壊的なボタンを含める必要がある場合は、主なアクションボタンよりも見つけにくくする方法を必ず見つけてください ボタンのベストプラクティス

今日のビジネスでは、ユーザーが自社の製品を利用し続けることが非常に重要であり、ユーザーがアプリを離れるためにユーザーに簡単にアクセスできるようにしたいと思う人はいませんまたは、製品の使用を中止します。

Pinterestからの完璧な例を以下に示します。

enter image description here

17
DPS

ユーザーフロー

各メニュー項目をタスクと考えてください。 task1, task2, task3.... taskNのように、タスクを順番に実行できます。実行できる最後のタスクはどれですか?答えは簡単です:logout。

アプリの人間工学

メニューの下部にログアウトリンクを追加すると、その要素を誤ってクリックしにくくなります。下の図を参照してください。

enter image description here

メニューを開いたら、上部にログアウトを追加して誤ってダブルクリックすると、ログアウトリンクが表示されます。

ただし、下部に追加すると、[各メニュー項目により、無視できるようになるまで機会が減ります。さらに、2番目と7番目の要素の間でログアウトに到達するには、ユーザーによる追加の作業が必要です。これにより、偶然にそのボタンを押す可能性がほぼ0に減少します。したがって、ログアウトは6番目または7番目の要素より先に進めないことをお勧めします。それ以上にトレードオフがあります。親指は以前より簡単に要素に到達し、ユーザーは必要なときにログオフするのを忘れる可能性があります

もちろん、サイズ(高さ)は、選択したフォントやパディングなどに基づくテストに依存します。また、アプリの用途にも依存します。必ずしも、セッションの終了後にユーザーがログアウトする必要があるとは限りません。しかし、とにかくオプションを提供する必要があります

結論

コストがほとんどかからないメリットをもたらす標準として認められているため、この方法で行われます

13
Devin

私の理解では、ログアウトボタンは、他のアクションとは異なるアクションを持つドロップダウンのボタンです。

メニューアカウントの詳細、設定、プロファイルの表示などの残りはユーザーのナビゲーション要素ですが、ログアウトボタンはユーザーがシステムからログアウトするためのアクションです。

確かに、ログアウトとナビゲーション要素は動作が異なるため、分離する必要があります。

ログアウトをボタンに配置すると、それはそれらを分離する方法であると言えますが、多くのアプリケーションがこのように使用するため、規則でもあります。

私もこの質問を見つけました。これは非常に興味深いものです。 ログアウトボタン/リンクの配置? これは、この質問 Webサイトでログアウトボタンが非表示になるのはなぜですか?

ログアウト機能を非表示にすることで、ブラウザまたはタブを閉じるだけで、サービスにログインしたままにすることができます。これにより、FacebookはすべてFacebookに報告する広告パートナーシップを通じて、オンラインの所在を公然と追跡できます。

最後に、たとえばJiraのように、ログアウトオプションを他のオプションと比較して明確に分離することが本当に気に入っています。これは、ドロップダウンの下部に表示するだけの場合よりもはるかに明確です。

Jira

6
Dimitra Miha

最高のユーザーエクスペリエンス:訪問者の好みに応じてクリック数と注文リストのアイテムを追跡します。

結果:ログアウトボタンが最初に表示される場合があります。

最高の企業経験:会社の最善の利益に従ってアイテムを注文します。

結果:ログアウトボタンが届きにくくなります。

4
cameraman

それはすべて、ログアウトがソリューションとユーザーの目標にとっていかに重要であるかに依存します。

機能のリストがある場合、ユーザーが実行しているタスクとの関連性に基づいて機能をスコアリングできます。

ログアウトがソリューションの主要なタスクに関連することはほとんどないため、ログアウトの位置が情報階層の最後の方に配置されることが多いので、垂直メニューがある場合は、下部に配置されることがよくあります。あなたはそれがしばしば(西洋文化の右側に)配置される水平メニューを持っています。

ただし、一部のソリューションでは、ログアウトを目立つ場所に配置するのにふさわしい特別なケースと見なす場合があります。右上隅に残ります(画面の角が目立つ場所です)。

一番下の行は、ユーザーが明示的にログアウトすることがどれほど重要であるかによって、位置が異なります。

ログアウトは他のすべての機能とは非常に異なるため、他のソリューション機能と並んでメニューに配置しないでください。

2
SteveD

適切な場所にログアウトボタンを配置することは、状況依存です。保護されたアプリの場合、ハンバーガーメニューの外側のヘッダーで目立つようにする必要があります。他の人のために、それはハンバーガーメニューの中にあることができます。おそらく、ユーザーが毎回ログアウトすることを希望する場合は上部に、使用頻度が低い場合は下部に表示されます。

1
Alipta Ballav