リピートボタンが見つからない!iOS 10のミュージック・アプリのUIについて考えてみる

Advertisement

where-did-the-button-go

iOS 10のミュージック・アプリで、リピートボタンを見つけられないという衝撃的な体験をしたので、将来、UIを考える際の教訓として書き残しておこうと思います。この衝撃を忘れないうちに!

僕はアルバムをリピート再生することが多くて、iPhoneで音楽を聴く際は、ほとんどリピートにしています。ところが、先日iOS 10にアップデートしたらアルバムが一度再生されたら終わるようになってしまい、リピート再生をしようと思ったら。。。

どこにもリピートボタンが見つかりません!

まずはライブラリ画面で探してみますが、ありません。
さすがに検索で探すとも思えないし。。。

img_5179

まぁ、ここにないのはわかるとして。
じゃぁ、再生パネル(勝手に命名)を表示させて。。。

img_5181

あ、あれ?
ここにもない。。。

そしたら、この3つの点のアイコンあたりをタップすれば?

img_5185

ない。。。
だったら今度は真ん中のよくわらないアイコンあたり?

img_5187

ぬ。。ぬ。。。ぬ。。。。。見つからない。

ということで、時間をおいて再度探してみました。

どうやって発見できたのか忘れてしまいましたけど。。。
なんとなく同じ操作を繰り返していたら、ふとしたタイミングで発見した気がします。

なんと、再生パネルのコンテンツを下にスクロールできるじゃないですかっ!!

ios10-music-control-go-up
ios10-music-control-scrollup

しかし、この画面、スクロールできる感がまったくないですよね?
デザイン的なヒントが示されていない、というか。

10人中7人、いや、8人はわからないって言うんじゃないかなぁ。
勝手な想像ですけど。

このUIがわかりにくい理由

img_5181

まず、再生パネルの上部のデザインの扱い(特に下向きの矢印アイコン)のせいなのか、この画面の内容を下にスクロールできるというのが想像しにくくなっています。この下向きの矢印は再生パネルを下に引っ張れば閉じられますよということを示すためのアイコンだと思いますし。

下矢印が示すもの

たとえば、下のキャプチャ画像のように通知パネルをスクリーンの端から引っ張ってくると似たようなバーアイコンが出てきます。

ios10-notification-ui

左の画像から順に、はじめは下方向の矢印、そしてまっすぐのバー、それから、最後には上向きの矢印に変わって表示されます(最後の上向きの矢印は消えちゃうんですけどね)。これを見ると、矢印はパネルの開け閉めの方向を表していると考えられます。

次にミュージック・アプリの方を見てみます。

ios10-music-ui-animation

再生バー(勝手に命名)をタップすると、左の画像にあるように再生パネルが下からアニメーションを伴って出てきます。

このミュージック・アプリのハンドルを見ると、出てくるときから下方向の矢印で表示されているのがわかります(真ん中の画像)。これを通知パネルのハンドルと同じデザイン・ルールで考えると、下にパネルを引っ張れることを示すアイコンになるんですよね。

なので、どう考えても「下にスクロールできますよ」というデザイン的なヒントを示すことができていないわけです。このキャプチャを撮った時はスクロールバーが出てますけど(右の画像)、一瞬で気づきずらいと思いますし。

このUIアニメーションを何回も見ていたら、下にスクロールすればコンテンツがあるというのに気づくのかなぁ。。。ないよなぁ。

他にもUIをわかりにくくさせている要因

他にも2つほどこのUIをわかりにくくさせている要因があります。

要素が綺麗にハマりすぎている

画面最下部に設置されているアイコンがきっちりはまり過ぎているからなのか、下に何かがあるというのが想像しにくくなっています。デザイン的にどうとかいうのはさておき、下のボタンが半分隠れていたりしたら、人は自然にスクロールしようとするんじゃないかなぁ、と。ちょっとカッコ悪いですけどね。

ios10-music-control-panel-hide

前例が少ない不慣れなUI

あと、ペロッと出てくるコントロール画面が下にスクロールできるというインターフェイスにiOSで今まであまり遭遇してこなかったというのも、このUIがわかりにくくなっている理由の一つなんでしょうか?

この画面が出てくるときのアニメーションで再生ボタンやその他のコントロールボタンなどが下からスクロールして出てくるようになっているので、下にスクロールができることをヒントとして示しているとも言えなくないんですけどね。かなり弱い、気付きにくいヒントですね。

これじゃダメ?

ios10-music-control-panel-idea

何かしらの理由があってリピートやシャッフルボタンは今の位置に設置されたんでしょうけど、上の画像のように、再生パネルのはじめに出てくる画面に、すぐそこに設置しちゃダメですかね?

電波塔みたいなアイコンの方が使用頻度が高いんですかね。音声の出力先を変えることって、そんなに頻繁にないと思うので、3つの点のアイコンをタップした時に出てくるパネルの中に入れても全然問題ないと思うんですよね。「AirPodsにすぐに切り替えられるようにここに入れなさい」と、偉い人に言われたのかなぁ。

ちなみに、左には曲がiPhoneにダウンロードされていない場合に「+」アイコンが表示されます。

ios10-music-plus-button

まとめ

UIって簡単じゃないですね。

UIデザインは様々な要因が絡み合って生み出されるものなので、一見シンプルに思えるようなことでも、その裏では何十、何百ものことが考え尽くされ、試されて最終のカタチに至っているんですよね。OS全体のデザイン・ガイドラインとか要素間の関係とか。さらには、マーケと開発の政治的な争いとか社内のグループ内での上下関係とかもあるだろうし、会社の考え方やブランディングを反映させたものにする必要があったり。売り上げにも貢献できないといけないし。。。そして、ユーザの声にも、もちろん応えなきゃ良いデザインにならないし。

とはいえ、ミュージック・アプリのこのUIは一体どうしてこういう決断に至ったのか。。。探してもらうためにあえて隠した、とか???

ある一定の割合でリピートやシャッフルボタンを探せる人はいるんでしょうけど、gori.meさんのこの記事 でも紹介されていたYouTubeビデオ でも人々が困惑しているように、かなりの確率でユーザは再生パネルがスクロールできることを発見できないのではないでしょうか?

どうやってこのUIに落ち着いたのか、デザイナーの方に決定プロセスを聞けたら、すごく勉強になるだろうなぁ。

“リピートボタンが見つからない!iOS 10のミュージック・アプリのUIについて考えてみる” への1件のコメント

  1. […] 6. UXデザイン:リピートボタンが見つからない!iOS 10のミュージック・アプリのUIについて考えてみる この記事をRTする […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です