趣味まるだし

趣味丸ごと。

MicrosoftはWindows 10でのハンバーガーメニューについて、今一度見直すべき

公開日時:2015/09/24 22:34
カテゴリー: Windows 10, Windows Phone

ハンバーガー
Designed by Freepik

今日はハンバーガーメニューについて書きます。以前から書こう書こうと思っていたのですが、モタモタしてたら日が経ってしまい、そうこうしているうちにGigazineに先を越されちゃいました。しかも結構前に。

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?(Gigazine)

ちょっと長くなりますので、ハンバーガメニューの問題点を理解している人は最初のセクションは飛ばしてください。

ハンバーガーメニューとは

ハンバーガーメニューは、ハンバーガーアイコンを押すことで開くメニューのことです。メニュー自体はボタンからドロップダウンで開くこともありますし、左右からせり出てくる場合もあります。スマートフォンのアプリでは左右式が多いように思います。

ハンバーガーメニューの画像

ハンバーガーメニュー。左上のハンバーガーボタンを押すとメニューが開く。

ハンバーガーメニューは狭い画面を有効に使えるということもあり、スマートフォンが普及したこの数年で、アプリやウェブサイトで急速に利用されるようになりました。それこそ、猫も杓子もハンバーガーメニューという具合。
僕は以前からこのメニューに疑問を覚えていたのですが、その理由として個人的に挙げたい問題点は5つ。

  1. ボタンを押してメニューを開くまで、中にどんな項目があるのかわからない
  2. いちいちメニューを開かないと他のコンテンツに移動できない
  3. ハンバーガボタンがメニューを表すということがあまり認知されていない
  4. 3本の線だけでは、そもそも「押せるボタン」だと認識されない可能性がある
  5. ボタンが画面の上の方にあることが多い

反対理由はその他にもいくつか挙げられますが、そのあたりは上記のGigazine記事をご覧ください。

1は言うまでもなくすぐお分かりになると思います。そのメニューの中にどんな項目があるのか、10個も20個もズラズラと項目があるのか、はたまた「設定」くらいしかないのか、閉じている間はわからないですね。そのアプリやサイトの規模がわかりづらいほか、自分が今どこにいるのかも見えにくくなります。

2について。メニューの項目間を移動する場合、通常ではメニューは閉じていますから、いちいちボタンを押してメニューを開き直さないといけないですね。ユーザーの手間が一つ増えることになります。

3はまさかと思う人もいるかもしれません。しかし実際にスマートフォンを扱い慣れていない人二人にハンバーガーアイコンを見せて、何を表すか聞いたところ「なにこれ?」と返されました。それだけ三本線=メニューであるということが普及していないということです。横や下に「メニュー」と添え書くことでメニューであると認識させることはできます。このサイトもスマートフォンデザインではそうしています。

4は3と関連します。メニューボタンであると理解する以前に、そもそも「ボタン」に見えない場合もあります。ボタンだと思われなければ押されることはありません。もっとも、これはボタンらしく見えるように工夫することで回避できるかもしれません。

5は以前にも書きました。ハンバーガーメニューのボタンは画面の一番上に置かれることが多いですが、大きめのスマートフォンを片手で扱っている場合に指が届かず、指がつりそうになります。下で詳しくみていきます。

このように問題が多いUIなので、最近はハンバーガーメニューを採用しない、あるいは採用していても廃止する例が出てきてます。Googleも最近は一部のアプリで廃止してきていますね。

AndroidのYoutube公式アプリの画像

AndroidのYoutube公式アプリ。以前あったハンバーガボタンはない。

Windows 10でのハンバーガーメニュー

さて、そんなハンバーガーメニューですが、最近になってやたらゴリ押ししている企業があります。そう、Microsoftです。今年7月に正式にリリースされたWindows 10でも、ばっちりハンバーガメニューが使われていますね。

Windows 10のスタートスクリーン画像

Windows 10のスタートスクリーン左上にハンバーガーボタン

スタートスクリーンで特にそうなんですが、こんな隅っこの方にポツッと3本線を置いただけでは、ボタンであると認識できない人も多いのではないでしょうか。正式ローンチ前のバージョンでは、タイル以外はこの3本線しか無く、電源ボタンと「全てのアプリ」へのアクセスが面倒だったため、結局この二つは外に出されました。ハンバーガーを使う必要がなくなったわけです。思えば、電源ボタンはかつてWindows 8でチャームの中に隠され、それが8.1で今度は外に出され、かと思えばまたメニューの中に隠されたり、出されたり・・・かわいそうなボタンですね。

初期のスタートスクリーンの画像

初期のスタートスクリーン。ハンバーガーボタンがポツッと置いてあるだけ。

メニューを開くとこうなります。

ハンバーガーボタンを押してメニューを開いたところの画像

ハンバーガーボタンを押してメニューを開いたところ。

何があるのかなと思って開いたら結局これしか無いんです。この内容だったら、もういっそ全部外に出しちゃって、ハンバーガーはやめたら?と思います。実際、ずっと前の最初期バージョンは外に出てましたよね。幅を取り過ぎるというならアイコンだけにして常時見えるようにするなど、方法は他にもあるはずです。

いっそ中身を全部出しちゃった画像

いっそ中身を全部出しちゃう。

それでもどうしてもハンバーガーを使いたいんだったら、こうしたらどうでしょう。

ハンバーガーボタンをボタンっぽくしたところの画像

ハンバーガーボタンをボタンっぽくしたところ。一応なんのボタンかはわかる。

・・・効果があるとは思えませんが。
これはPCのスタートスクリーンでの例ですが、Windows 10では標準のアプリは原則ハンバーガーメニュー採用です。Windows 10は様々な大きさのデバイスに対応する必要があるので、UIを画面サイズごとに大きく変更するのは難しいのでしょうか。

Mobileでのハンバーガーボタンの位置と操作性

Windows 10 Mobileでは、やはり片手操作で指が届かないのが非常にまずいです。特に5インチ以上の画面サイズでは致命的です。

この問題に対してMicrosoftが提示したのが、画面を半分下げるというもの。AppleがiPhone 6 Plusで採用したのと同じ方式です。Windows 10ではスタートキー長押し(1秒程度)で画面を下げられます。画面上部にアクセスしやすくなるため、その点では少しだけ便利にはなりました。しかし実際はまったく良い解決策ではありません。ハンバーガーボタンを押してから画面下部の項目を選択する場合や、画面全体を見たい場合には、例えば、スタートキー長押しで画面下げ→ハンバーガーボタン→スタートキー長押しで戻す→目当ての項目を選択、という面倒な手順を踏まねばなりません。

スタートキーを長押しすると画面が下がる画像

スタートキーを長押しすると、画面が下がる。戻すにはもう一度長押し。画面が下がった状態では「ダウンロードと更新」などにアクセスできないので、元に戻す必要がある。

そもそもこの画面下げ方式は、iOSのUI配置を変更したくないAppleが、大画面の6 Plusで操作をしやすくするために導入した苦肉の策のはずです。UIを大きく変更することが決まっていたWindows 10で、わざわざ使いづらいUIにした上で画面下げ方式を導入するというのは、一体何を考えているんでしょう。はじめから問題が起きないUIにするか、どうしてもハンバーガーメニューが必要ならせめてスワイプに対応するとか、Galaxy NoteやSHARP端末のような画面縮小方式を採用していたら、こんなことにはならなかったはずです。

このように、個人的にはWindows 10の、特にMobile版でハンバーガメニューを導入するのは反対です。Microsoftにはぜひ方向性を見なおして欲しいです。廃止までは無理でも、せめてスワイプには対応して欲しいところ。

・・・と思っていたら、この間アップデートされたMobileのフォトアプリに異変が。

フォトアプリのUIが変更になって、ハンバーガーボタンが消えた画像

フォトアプリのUIが変更になって、ハンバーガーボタンが消えた。現在のバージョンでは下部のボタンも少し変更されている。

ハンバーガーボタンが消え、画面上部のボタンも下に移動。コレクションとアルバムはスワイプで切り替わるようになりました。
フォトアプリは標準アプリであるため、これが変更されたということは、その他のアプリも変更される可能性があります。
「Swipe sucks」とか言っていた元MSデザイナーとは一体何だったんだでしょう。とはいえ、この修正は歓迎できることです、まだ不安はあるものの、今後に期待です。


コメントする

お返事遅れることがあります。急ぎのご質問等はTwitterの@jucius0へどうぞ。