リピートボタンが見つからない!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に落ち着いたのか、デザイナーの方に決定プロセスを聞けたら、すごく勉強になるだろうなぁ。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

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

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

  2. すずせりょう より:

    何かの拍子でリピート再生になってしまって直せずにいました。
    本当にありがとうございます!助かりました。

  3. ソウキチ より:

    ありがとうございます!
    去年の11月に新しいiPadを買って以来、最初に選択した曲だけしか再生されなくて、ずっと気にはなっていたものの、放置してました。
    このパネル、下にスクロール出来たんだ!(^^;)
    …助かりました。

    • ryo より:

      僕も見つけたときは「うおっっ!!」ってなりました。お役に立てたようで良かったです!

  4. より:

    iOS13ではスクロールすら不可になり、次はこちら?ボタンからリピートするようになってました。どう見ても隠してますよね、これ。電波塔アイコンがほんと要らないからそっち隠して欲しい、、

    • ryo より:

      ほんとに、隠してるようにしか思えませんねー。Apple Musicユーザーにはリピートさせない方がエンゲージメントが上がるみたいなデータがあるんですかね。なので、リピートさせずに他の曲に誘導したいとか。

  5. 断食荘 より:

    初めまして。
    丁度、ボタンが見つからずに憤慨していたので助かりました。
    ありがとうございます!!