WEB・IT業界で働く人々の人生を少し豊かにするメディア

CAREER HACK

AWAが実践したUXの改善手法とは? 技術サイドからアプローチすべき理由

2017-02-23

AWAが実践したUXの改善手法とは? 技術サイドからアプローチすべき理由

音楽ストリーミングサービス《AWA》のAndroid開発リーダー 新家亮太氏が登壇。最高のユーザー体験を演出するためには、UIへのこだわりだけでなく、技術面からのアプローチが重要だと語る。AWAで実践されたUX改善のための技術とは?

技術面のアプローチでUXを向上させる|AWAの場合

※Google Playの『ベスト オブ 2016』 に選出された企業が集結したイベント『App Talk Night』の内容をお届けします。[登壇:Loco Partners(Relux)、AWA、Fablic(FRIL)、NewsPicks、VASILY(iQON)]


3000万曲以上が登録なしですぐ聴ける、音楽ストリーミングサービス「AWA」。2015年5月のサービスリリース以降、順調にユーザー数を獲得。リリースから1年半後の2016年11月には1000万ダウンロードを突破している。

急速にユーザー数を伸ばしていった理由の一つにユーザーの利便性を追求したUXデザインが挙げられる。事実、AWA株式会社の新家亮太氏も「UX向上のために技術、デザインの両面からアプローチしてきた」と語る。

具体的にどのようなことに取り組んできたのだろうか?4つのポイント見ていこう。


【1】ログイン不要、ワンタップでスタートできるように

スライド資料

「アカウントの情報とかを入力するステップを省き、ワンタップで始められたほうが、ユーザーはすぐに楽しめる』という思いから、画面をワンタップしたらすぐログインの画面に飛べるような仕組みにしました」(新家氏)

具体的な仕組みは裏側で匿名ユーザーをつくり、それをAWAのユーザーとして扱うようにするというもの。インストール後、きちんと使ってもらうために使い始めるまでのハードルを低くしたのだ。


【2】表示速度を早く

アプリを使っていくにあたって、ユーザーの不満になりがちなのはスピードだ。表示速度が遅ければユーザーのイライラが募り、たちまち使われなくなってしまう。そのためAWAでも表示速度を早くすることにこだわったという。

具体的には画像のフォーマットにWebP(ウェッピー)を使う、データセットをキャッシュして先に出す、という2つのことを実施したとのこと。

スライド資料

「WebPはGoogleが開発した静止画のフォーマットでして、ウェブサイトのトラフィック量軽減と表示速度短縮を目的としたものです。AWAではAndroid4.4からWebPを使うようにしました。こちらの画像、あまり違いがわからないかもしれませんが、左側のPNGは270KBとファイルサイズが半分以上減っているので、WebPを使うと軽量の通信ができる、それで速く画像を表示できます」(新家氏)


もう一つのデータセットをキャッシュすることについて。

ローカルのデータベースに、あらかじめプレイリストなどの情報をキャッシュしておき、そのページにアクセスしたときにキャッシュの情報を出す。そして裏側ではサーバーと通信を行っておく。そうすることで、その通信が完了したときに、新しい情報で更新をかけてあげる、という仕組みにしている。

スライド資料

「この更新に関しては、差分更新というものを行っています。AWAを起動したときに大きな情報を取得すると、結構時間がかかってしまう。ですが、たとえば、次回以降の更新については、その差分のみを更新する。つまり、新しい更新情報のみを上書きするような形になっているので表示速度も早くなり、ユーザー体験も良いものになっています」(新家氏)


【3】重たい処理を分割

スライド資料

重たい処理があると、反映までに時間がかかってしまう。当然、それはユーザーの利便性を阻害する。

実際、AWAでもユーザーの情報を、お気に入りやマイプレイリストから取得しているそうだが、その処理が結構重く、反映までに時間がかかっていた。そのため重たい同期処理をいくつか分割し、それぞれの情報が更新される度に情報を反映させる形に変えることで高速化を図ったとのこと。


【4】インタラクションにこだわる

また、デザイン面に関して、AWAはインタラクションにこだわることで、ユーザーの利便性を向上させている。

「メインの画面から詳細画面に遷移するとき、急に画面が変わってユーザーが迷子にならないように、その過程もアニメーションさせてあげるなど、細かい動きとかにも気を遣っています。他には、パララックスという、近くにあるものは速く、遠くにあるものはゆっくり動くように見せるエフェクトなど、現実世界にあるような動きをできるだけ取り入れるようにして、使いやすさを演出しています」(新家氏)

ユーザーにとって何が使いやすいのか。それを技術とデザインの両面から考え、細部までこだわり抜く。その姿勢がUX向上には欠かせないのかもしれない。


▼App Talk Nightにて語られた各社の開発Tipsについてはコチラ
・Googleベストアプリ獲得! 僕らが実践した3つのポイント| Loco Partners(Relux)
・エンジニアよ、デザインを恐れるな。ガイドラインの「根拠」が強い味方になる|Fablic(フリル)
・専任のいない「ダメアプリ」から脱却! News Picksがたった1年でGoogleベストアプリを受賞できたワケ
・VASILYの開発体制とは?3年連続Google Playベストアプリ《iQON》開発のウラ側



CAREER HACK をフォロー

タグ一覧