“ハンバーガー”はいらない ナビゲーションメニューを変更

ナビゲーションメニューを変更しました。
右上の「メニュー▼」から飛びます。

ドロップダウンでは開かないと見えないし、「ハンバーガーボタンは良くない」説にしっかり乗っかっています。
いや、ただできないだけかもしれませんが。

  • 「それをクリックすることで何かが得られるとしても、何を得られるかがクリック前に明らかでない」
  • 「クリックしなければ情報が表示されない」
  • ユーザーは何を求めているのかについて明確には理解しておらず、自分の望むものに近い”香り“のようなものを頼りに行動する

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?
The Hamburger Menu Doesn’t Work

わかる。今でこそ慣れたアプリでも最初はどこに何があるのさっぱりかわからなくて困ったこと数回。「香り」もそう。必ずしも「答え」ではなくその手がかりでいいわけです。

  • ハンバーガーではなく「メニュー」と表記にする
  • ドロップダウンではなく下(右)の方で見えている
  • つくば、研究学園など駅名を表示する

7項目+2項目。スマホでこれが限界という数に留めましたので項目(どの階層にリンクするか)の厳選を行っています。

同時にトップページを変更。
モバイル優先とは言えPCの見た目もあるのでモバイル風メニューボタンだけとはいかず、グリッドデザイン風味にしてごまかしたわけです。
こちらでは利用の多いコンテンツ数点を示して「香り」を出し、全部盛り込まず、他はナビゲーションで対応させました。

これは、レスポンシブデザインなのでスマホで見てトップページが冗長にならないようにするためでもあります。
さらに条件分岐でPCより表示少なめにしていますが、やっかいなことに条件分岐をページ上部で行うとGoogle検索結果の「スマホ対応」表示が消えてしまうので完成後に再変更となりました。

出来は65点。
全体のサイト全体を見直して最良の方法を取れば理想ですが、ごめんなさい。力不足です。なんとかなる最大公約数としてこうなりました。
再々度直すかもしれません。

                                                               

ブスカレンダー(ブサイクに試験運用中)

12月
10
全日 19日まで筑波山ケーブルカー運休
19日まで筑波山ケーブルカー運休
12月 10 – 12月 19 全日
19日まで筑波山ケーブルカー運休
筑波山ケーブルカーは定期検査及び設備更新工事のため運休
1月
1
全日 3日まで特別ダイヤで運行 関東鉄道...
3日まで特別ダイヤで運行 関東鉄道...
1月 1 – 1月 3 全日
3日まで特別ダイヤで運行 関東鉄道他一般路線バス
関東鉄道・関鉄パープルバス・関鉄グリーンバス一般路線バスは特別ダイヤ(毎年異なる)で運行されます
1月
28
全日 2月1日まで筑波山ロープウェイ運休
2月1日まで筑波山ロープウェイ運休
1月 28 – 2月 1 全日
2月1日まで筑波山ロープウェイ運休
筑波山ロープウェイは2019年1月28日-2月1日定期検査のため運休

筑波山ケーブルカー運休:2018年12月10日-19日(定期検査及び設備更新工事のため)

筑波山ロープウェイ運休:2019年1月28日-2月1日(定期検査のため)