愛用サービスをリデザインしました〜radikoアプリ編〜

radiko_renewal.kv.001

Webサイトやアプリを使っていて「使いづらい」と思ったら職業柄「なんで?」ってことを考えちゃうんですけど、今回たまたまそれらしい答えがすぐにイメージできたので、勢いでデザインしました。このポストでは、今回特に気になった課題とそれぞれの解決策についてまとめようと思います。

radikoアプリをデザインした経緯

radikojp-premium

インターネットでラジオが聴けるサービス「radiko」。2016年10月から提供が始まったタイムフリー機能で過去1週間分のラジオを聴けたり、課金すればエリアフリー機能で日本全国のラジオが聴けたりと、ラジオ好きには必須のアプリです。そしてぼくもradikoを愛用しているラジオ好きのひとりだったりします。普段はPCからWebで利用することが多いのですが、先週末に自宅でアプリから利用しようとした際に使いづらさを感じてしまったので、今回「もしradikoをリニューアルするなら…」ということを考えながら、勝手にデザインしてみました。あわよくばradikoアプリ担当者のもとまで届いてくれ!!!

3つの課題と解決策

radiko_renewal.001

今回は実際に利用しようとした際に違和感やストレスを感じた、以下の3つのポイントを解消できるようデザインしました。

1.検索

まず違和感を抱いたのは、検索のUIとフローの設計です。この点については、実は前々から使いづらさを感じていたポイントでした。現状の検索について、図解するとこんな感じです。

radiko_renewal.003

見て分かるように、検索は全体を横断するグローバルの機能として実装されています。そしてここで厄介なのは、モード(今回は便宜上「ライブ」「タイムフリー」「エリアフリー」のことを「モード」と呼びます)を切り替えた際に検索UI(虫めがねアイコン)の色が変わり、あたかもそれぞれのモードの検索のように見えてしまうことです。

ぼくは好きなアーティストがレギュラーを務めるラジオをタイムフリーで聴くことがよくあるのですが、この場合「タイムフリーにモード切り替え」→「アーティスト名で検索する」という流れで番組を検索します。しかし検索結果では「これから放送」(=ライブ)と「今すぐ聴ける」(=タイムフリー)がタブで切り分けられて表示されるため、ほぼ毎回遠回りする流れになっていました。自分自身この遠回りを何度も繰り返していたため、今回は検索の位置付けを以下のように変更しました。

radiko_renewal.004

「ライブ」利用時と「タイムフリー」利用時、「エリアフリー」利用時では、検索の条件もニーズも変わってきます。上図のように検索のUI、そして検索対象を変更することで、ユーザーの状況に合わせた最適な検索条件を提示することができます。例えば今回は「ライブ」の状態をデザインしたわけですが、この場合は地域や放送日で検索する必要はありません。状況に合わせた検索条件を提示できる構造をつくることで、自分自身が感じていたようなストレスは未然に防ぐことがきると考えました。

2.プレイヤー

これは単純な話ですが、再生中に操作したいUI(再生/停止/ボリューム調整)が上部固定で遠く、アクセスしづらい状態にあります。また再生中のモードや番組についても把握しづらいため変更しました。再生中に操作したいUIについてはアクセスしやすく、また再生中の番組情報で表示すべきはラジオ局よりモードと番組名であると考えてデザインしました。

radiko_renewal.005

3.メニュー

一番の改修ポイントでした。メニューを開いた瞬間、メニューの中身が精査されておらず、詰め込まれている印象を受けました。このようなメニューは典型的な失敗メニューだと思っています。

radiko_renewal.006

とりあえず情報を置いておくには便利な気がしてしまいますが、明確にプライオリティを判断して的確に配置してあげないと情報は死んでしまいます。普段開かないメニューの中にはあまり見たことがない情報・機能がたくさんあったのですが、(あくまでも自分の分かる範囲でになりますが)中身を整理して、タブバーに表示するもの、いずれかのモードのコンテンツエリアに配置するもの、削除するものに分類して整理しました。

デザインして思ったこと

思考トレーニングとしてのリデザイン

まず今回のリデザインは画面内のデザインのみならず、構造や機能もゴリっと見直しました。プロダクトのあり方を考えるときに、情報設計は戦略とクリエイティブの橋渡しになる重要なパートだと思っています。ぼく自身がIA(Information Architect)からキャリアをスタートしたので構造的な視点に偏っているとも思いますが、今回は思考の壁打ちができたよい機会でした。

プロダクトとしての理想と現実

改めてメニューや全体のデザインなどを見て「なぜ?」を考えていくと、非合理的なポイントが多いことに気が付きました。これはあくまでも推測ですが、かなり複雑な社内事情があるのではないかと思います。興味本位で運営会社である株式会社radikoの会社情報を見てみると…

radiko.jp

サービスの仕組みを考えると仕方ないことだとは思いますが、多くのステークホルダーが見えます。今回はそんなことは無視して好き勝手にデザインしてしまいましたが、実際のご担当者の方は四苦八苦されたことだろうと思います。とはいえ、そこを調整・説得・協力してこその良いサービス体験だと思っているので、今後のリニューアルでは何とか乗り越えてプロダクトのよりよい姿に近づけてもらえたらと思います。radikoは愛用サービスなので、今後の展開を楽しみにしています!

改めて、radikoアプリ担当者のもとまで届いてくれ!!!


SNSでもご購読できます。

コメントを残す

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>