Glósóli

うーん

ハンバーガーボタンに頼らないモバイル UI 考

Web jQuery UI

ハンバーガーボタン 

ハンバーガーボタンについて気持ちがあります。

ちょうど Web サイトを好き勝手作れる機会があったので，ハンバーガーボタンを使わない実験的なモバイル UI を組んでみた。

 

作ったもの

TA をやった授業の引き継ぎ資料的なものを作った。一応内部資料的な扱いになりそうなので URL は載せられません，あと一部名前を隠したり表記を変えたりしています。

まず PC 向けはこんな感じ。Arduino や電子工作がらみの資料なのでモバイルファースト的な発想はなく，ナビゲーションは2階層です。まぁありがちな感じ。

これをベースにモバイル用に落とし込んだのがこちら。さっきと同じ操作をするとこのようになる。ここでハンバーガーに逃げなかったぞというのが主題です。

 

いいところ

ハンバーガーと比較して，

  • 現在地が常にわかる
  • 大体どんなメニュー画面なのか事前に予想がつく（多分）
  • メニュー開いてるときもメインコンテンツがあまり隠れない

あたりですかね。

 

ダメなところ

  • 階層性の明示がイマイチ
  • 実装をモバイルと PC で分ける必要があって面倒

「階層性の明示」はアニメーションで多少解決できるかなぁと思った。こんな感じとか。

ただこれやろうとすると書き直す部分が多くなるので今回はやめた（上の動画は AE でそれっぽくしただけです）。まぁ色々と方法はある気がする。

 

まとめ

自分としては操作性も含めてあんまり悪くない気がした。こういうナビゲーションはあまり見ないし見栄えがどうなのかとかはあまり判断ができない。先行事例があると泣く（少なくとも近いのはあると思う）けど参考にしたいので何かあったら教えてほしい。全体的にフィードバックが欲しい。

あと今回はナビゲーションのタッチ操作まわりで Swiper というライブラリを使ったのだけどめちゃくちゃ高機能な良いライブラリだった。

Swiper - Most Modern Mobile Touch Slider

コリス系のメディアでもあんまり見かけない（か紹介が異様にさっぱりとしている）けどあまりにも機能が多いので公式のリファレンス見た方が早いよねということなんだと思う。

4月だなぁ。