グローバルメニューの動きは統一されるべきだ

2017年10月15日 更新

グローバルメニューの動きとは

例えば、header固定型のナビゲーションに複数の項目があって、

hover で表示される、表示されない
click すると表示される、そのままリンクで別ページへ飛ぶもの

もっと細かい話をすれば、テキストリンクやリンクのhoverエフェクトで、一部には「transition」が指定されているのに、指定されてない部分もあったりと、こういった仕様のサイトは沢山ある
最近沈静化した?ハンバーガーメニューと違い、使う側が慣れればいい、という問題ではないように思う。

ハンバーガーメニュー

← よくあるこれ

ハンバーガーメニューの動きは一貫している

それは、「押したら何かしらでる」という事。

現在ハンバーガーメニューが浸透し、許されているのは、これを多くのユーザーが理解したからである。

しかし最初に上げた例では、それが統一されていない、
勿論なんでもかんでも同じデザインで統一しろとかそういう事ではなく、
ものによってコンテンツ量も変わり、それぞれにデザインする必要がある。

しかし、その中でユーザーが使いやすいものを作らないといけない。

ハンバーガーメニューの問題

ハンバーガーメニューが一時期特に問題になった頃、

ユーザーがなんのボタンだかわからないから、
アイコンの近くに「MENU」ってテキストいれたろ。というような動きがあったが、
今回の例に関してはそういった考えすら出てきてないように思う
いや、出てはいるがそれほど重要視されてない、重要度が低いというイメージがある。

もしテキストにhover して下にdropdownで表示される仕様だとして、
その元テキストに的なアイコンをつける、というのもよく見かけるが、

他のメニューと動きが統一されていない時点で違和感がある。
また、clickして発火するのかhoverで発火するのか触るまでわからない。
(mobileオンリーであればclick以外にないのだけれど)

clickしてメニューが開くのならば全てそうあるべきだし、
リンクで別ページへ遷移するのなら、全てのメニューの動きはそうあるべきだ。

カテゴリーは優先度も高いし、数は8つくらいだからdropdownで、
タグはちょっと数が多いからページ遷移させとこ、な動きが大っ嫌いである。

確かに、
hover or click して表示されたものから選んで遷移という動きは楽かもしれない。
でも解りやすいか、という観点に絞ると否である。

現実の資料整理の場合

例えば、
現実で大量の物理的な紙資料があって、その大量の資料たちはかなりの数の種類に分かれている、
それらを格納する時、取り出す時に現実であればどうするだろうか。

格納

  • 各書類用に棚を用意する
  • 棚別に名前シールを貼り付ける
  • 各棚に該当の書類を収納する

取り出し

  • 棚の場所へ行く
  • 目的のものをシール名称を見て探し出す
  • 棚を開ける

上記の流れは、当たり前の動きだが、

言ってしまえば今回のhoverして表示されるdropdownは、
自分が何かを探す気もないのに、目の前に大量の棚がいきなり現れる感じ。
(マトリックスの扉のシーンみたいな)

そして、いざ探そうと思って棚がある部屋に入ろうとしたら、
入る前に「ほら!どれだよお前が探してるの、ほら!!どれ!」な感じで押し付けられる、
そして別の部屋に入ろうとして、あ、またあの押しつけがくる…っておもったら今度はこない、

要は、言いたいことは

ユーザーが予想できる設計にし、その予測を裏切らない、
ユーザーのタイミング、行動に寄り添うべきだという事。
ユーザーがどう動いて、どの情報が今見たいのか、必要な情報だけがそこにあるか、
そして、一貫性を持たせる事が大切だということ。

:備考
まあ正直AMP押し押しのモバイルファースト…いやオンリーの昨今、
グローバルメニューにそんな動きいれる時点であれなんですけどね…(それ言ったらもともkry)