IA

愛用サービスをリデザインしました〜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アプリ担当者のもとまで届いてくれ!!!

【書評】IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン

iauxpractice_cover

「IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン」をようやく読了。

iauxpractice_cover
そして読了後、本書についてさまざまな感想や書評を拝見した。
その中で何人か「教科書的一冊」という表現をしていたが、教科書」ではなく「参考書」としてとても有益な一冊なのではないか。

実務の手引きとしての参考書

本書はタイトルに「モバイル情報アーキテクチャとUXのデザイン」とあるように、「モバイル」という環境に絞って、デスクトップのデザインからの変遷やユーザー特性など「前提」を明示した上で、「実務」のレベルを向上させるための知恵や知見が散りばめられている。
IA/UXのデザインについて、手を取ってイチから教えてくれる教科書的書籍ではなく、あくまでも実務の手引としてアドバイスを求めるように読みたい参考書だ。

したがって、実務の経験がなくこれからIA/UXを学ぼうという読者には少し頭に入りづらい内容であるだろう。
※ amazonにある★1の書評はそういった読者層が手に取ったのではないかと推測。

IA/UXをイチから勉強したいのであれば「IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計/長谷川 敦士」や「UXデザインの教科書/安藤 昌也」が適しているかもしれない。

本書籍ではまずIA/UXデザインの基本的な捉え方や「モバイルファースト」の考え方について、多くの参考文献と筆者の経験を基に記述されている。そしてモバイルにおけるUXデザインについて、よく用いられるモバイル時代の方法論とよくある課題&解決策が、坂本さんの長年の経験、知見に基づいて実務的な視点でまとめられている。UXデザイン、UIデザイン、情報設計領域で実務を経験して壁にぶつかった人、難しさを痛感した人にこそ有益な内容になっているのではないか。

UX関連の書籍がアカデミックな内容が多い中、ここまで実践を想定した内容が網羅されている書籍は重宝される。

以下に気になった、気付きがあった点をいくつか簡単にまとめる。

気付き・発見

▼ モバイルファーストの考え方
モバイルファースト ≠ モバイルサイト、アプリを構築すること
モバイルファースト = ユーザーが本当に必要としていることにフォーカスして、モバイルサイトやアプリを設計すること。
→ ユーザーを知ること、ユーザーのニーズを掘り起こすことが肝となる。
→ UXデザインアプローチが有効。

▼モバイルでのデザインパターンの考え方
何がユーザーにとって必要な情報か、どうすれば伝わりやすいか、といった機能的なことが重要。
→ モバイル環境においては、デザインに求められるものを「情報」ではなく「機能」として捉えることが必要。
→ 機能 = 利用の対象
→ 「ビジュアルデザイン」も「インタラクションデザイン」も「構造設計」もすべてユーザーが目的を達成するための機能。
→ これらは総じてデザインシステムとも捉えられる。

▼定量的調査と定性的調査の組み合わせ
● 定量→定性
定量調査の結果から、被験者を選定して定性的調査を実施する場合
アクセスログやアンケート調査からカスタマージャーニーマップを作成する
→ カスタマージャーニーマップはあくまでも仮説なので、実際の定量データをプロセスに取り込むことで精度を上げることができる。

● 定性→定量
定性的調査で仮説を生成し、調査項目を決めて定量的調査を実施する場合
→ [所感] 定量的調査で見えてくる課題より定性的調査でユーザーのインサイトを深掘りした結果導かれる課題の方が、より本質に近い課題になるのでは。

まとめ

また最後にAppendixとして3名のインタビュー、コラムが掲載されているのだが、そのうちのひとつとしてTHE GUILDのUIデザイナー深津貴之さんのインタビューが掲載されている。モバイルアプリのUIデザインを多く手がけられている深津さんのデザインメソッドやインプット方法、そしてクライアントとの立ち回りまで、さまざまな角度からUIデザインのお話をされており、こちらも必読。

はじめに経験がない人の「教科書」としては難しいと書いたが、もし仮にモバイルのIA/UXデザインの全く経験がなかったとしても、本書を読んでおくことでありがちな問題に直面せずに済んだり、スムーズに乗り越えられたりするヒントにはなると思うので、実務の従事する人には一読いただくことをオススメしたい。