ハンバーガーメニューよりもタブを使用せよ！【エンジニアデザイン心理学】




## 結論

- 非表示のナビゲーションを使用する場合は、表示されている場合よりも **タスクの後半で使用される** という研究結果がある
- 特にデスクトップアプリではハンバーガーメニューを使用すると見つけやすさが低下してしまう
- ナビゲーションは画面の最下部に表示せよ
    - <img src="https://www.ey-office.com/images/react_native_jyanken.png">
    - from https://www.ey-office.com/blog_archive/2020/12/18/react-native-was-very-evolved-2/
- もしくは、タブを表示せよ
    - <img src="https://img.f.hatena.ne.jp/images/fotolife/h/hatenabookmark/20160526/20160526182349.png">
    - from https://bookmark.hatenastaff.com/entry/2016/05/27/080000
- 最悪、ハンバーガーメニューに「メニュー」というラベルを添える
    - <img src="https://blog.to-ko-s.com/wp-content/uploads/2023/02/css-hamburger-menu.jpg">
    - from https://blog.to-ko-s.com/css-hamburger-menu/





## 心理学：隠れたものはタスクの後半に処理される

書籍「ユーザーインターフェースデザインのお約束」にはこんな項目があります。

物議をかもすUI、という点でハンバーガーメニューの右に出るものはないだろう。ここ数年、デバイスの画面サイズに依存しないウェブサイトを構築するための「レスポンシブデザイン」が普及し、それに伴って狭い画面での省スペース効果が高い三本船が盛んに使われるようになった。

だがハンバーガーメニューには次のような悪影響があることが調査で明らかになった

https://www.nngroup.com/articles/hamburger-menus/

- 非表示のナビゲーションを使用する場合は、表示されている場合よりもタスクの後半で使用します。
- ナビゲーションが非表示になると、ユーザーはナビゲーションを使用する可能性が低くなります。
- デスクトップでは、ナビゲーションを非表示にすると、電話機よりもエクスペリエンスとナビゲーションの見つけやすさが低下します。

この中でも最も重要なのが、 **非表示のナビゲーションを使用する場合は、表示されている場合よりもタスクの後半で使用される**という点だ

そのほかの論文でも（出所は忘れてしまったが...）


## 認知心理学：オブジェクトの永続性

心理学者のピアジェは認知心理学における「オブジェクトの永続性」というものを提唱しました。

> 物体に永続性があるかどうかを判断するために、ピアジェはおもちゃを隠したり持ち去ったりする前に幼児におもちゃを見せました。彼の実験の 1 つのバージョンでは、ピアジェは毛布の下におもちゃを隠し、幼児がその物体を探すかどうかを観察しました。

> 乳児の中には、物を失ったことに混乱したり動揺しているように見える人もいますが、代わりに物体を探している幼児もいます。ピアジェは、おもちゃがなくなったことに動揺している子供たちは物の永続性についての理解を欠いており、おもちゃを探していた子供たちはこの発達のマイルストーンに達していると信じていました。

https://www.verywellmind.com/what-is-object-permanence-2795405

要は、**あるべきものがないことは不安であり、子供の課題の一つとして、目に見えないものでもどこかにあるという理解が必要である**　というりろんです。

ここでは省きますが、「不安」という症状は心理学的にもあらゆるデメリットをもたらします（脳の構造から理性をなくし、本能の領域で考えるようになってしまうなど）

上記の理由からも、そもそも見せるべきものを見せて置き、不安は取り除いておくべきです。



## ハンバーガーメニューの役割

ハンバーガーメニューは、画面上に表示されている情報を減らし、ユーザーにとって不要な情報を非表示にすることで、認知負荷を削減できる場合があります。

しかし、**ハンバーガーメニューに隠れているメニュー項目がユーザーにとって重要な情報である場合、その逆の影響が生じる可能性があります。**


<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=oreilly10book-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4873118948&linkId=effc8880a09bbd53be7bf93cc0017201"></iframe>


## ハンバーガーメニューを使ってはいけない2つのケース


### ペルソナにご高齢の方が含まれるケース

ハンバーガーメニューのアイコンは広く認知されていますが、全てのユーザーが同じように理解するわけではありません。

特に **初めてのユーザーや高齢者など、ある程度のITリテラシーがないユーザー層では、アイコンの理解に課題が生じる可能性があります。**


### 大切な情報につながるナビゲーションを出したいとき

ハンバーガーメニューは基本クリックされないため、ユーザーの価値につながる情報をハンバーガーメニューに入れてしまうと、
最悪ブラウザバックされてしまうかもしれません。
そのケースではハンバーガーメニューを使用しないでおきましょう。



## ハンバーガーメニューをどうしても使いたいときは


書籍「ユーザーインターフェースデザインのお約束」からは、以下のような結論が出されました。

- ナビゲーションは画面の最下部に表示せよ
    - <img src="https://www.ey-office.com/images/react_native_jyanken.png">
    - from https://www.ey-office.com/blog_archive/2020/12/18/react-native-was-very-evolved-2/
- もしくは、タブを表示せよ
    - <img src="https://img.f.hatena.ne.jp/images/fotolife/h/hatenabookmark/20160526/20160526182349.png">
    - from https://bookmark.hatenastaff.com/entry/2016/05/27/080000
- 最悪、ハンバーガーメニューに「メニュー」というラベルを添える
    - <img src="https://blog.to-ko-s.com/wp-content/uploads/2023/02/css-hamburger-menu.jpg">
    - from https://blog.to-ko-s.com/css-hamburger-menu/


from https://qiita.com/minegishirei_v2/items/f297ef569398f04df84e