September 27, 2019

UI/UXをとるのか、金儲けをとるのか

初めに断っておくが、どちらが正解というものはないし、この2つは相反するものでもない。 この2つはしばしば対立する課題ではあるが、共存しうる 関係である。

UI/UX or Profitable
`

売上のジレンマ

サービス開発の現場では、よくこのような対立が発生することがある。

  • とある会議にて

「この施策は、今クォーターで最も力を入れている施策です!PVを上げるためにアプリの起動時に毎回モーダルで表示させましょう。」

  • 後日、

「例の施策はCTRが通常の30%も増加し、売上が15%も上がりました!!目標超過達成です。」

これはフィクションであるが、なんらかのサービス開発をしたことがあるなら、似たような光景を思い浮かべる事が出来るであろう。

モーダル(ダイアログ)UIというのは、ユーザの動作を妨害する動作になるので、 そのサービスにおいて重要度がかなり高いアクションでない限り出すべきではない。
これは全員が同意すると思う。 しかし、残念なことにモーダルUIは全画面に表示されるため、嫌でも目に入ってくる。 かつ、この手のUIはわざとOS標準に従わずに、閉じるボタンを分かりづらくして広告等のリンクに誘導させるものが多い。 そのため今までリーチ出来なかったユーザに興味を持ってもらえるパターンも考えられるが、 間違えて押してしまう場合も含め当然クリック数は増える。

そうすると、嫌でも閉じる動作を挟ませる とても邪魔なUIなため、当然PVは100%になり、CTRは跳ね上がった結果、売上の増加に繋がる。
これが売上のジレンマである。

モーダルUIは悪なのか

なんらかのアクションに対するフィードバックならば、ダイアログでわざわざユーザの行動を止めてまで通知せずに、 AndroidでいうとSnackBarやToastのようなUIでフィードバックを返すべきである。

andorid snackbar
`

マテリアルデザインのガイドラインには、しっかりと

A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. Dialogs are purposefully interruptive, so they should be used sparingly.

https://material.io/components/dialogs/#usage

重要な情報を提供したり、決定を求めたりするために使い、ユーザの動作を意図的に中断するため、慎重に使用する必要があります
と明記されている。

昔はAndroidもProgress Dialogと呼ばれる、通信中を表すためのモーダルUIが存在した。

andorid progress dialog
`

当然非推奨になり絶滅したはずだったが、正確にはまだ存在している。 2019年になっても、銀行アプリとか、キャリアのアプリとか、お役所仕事で作りましたみたいなアプリでは表示されることがある。 古いOSもサポートしなければならないからという理由もありそうだが、もう2019年である。 PCよりもライフサイクルの短いスマートフォンのOSをいつまでサポートしなければならないのだろうか、 PCで言ったらWindows Vistaを今もサポートしているぐらいの感覚である。
性質上難しいものもあると思うが、IT時代についていけていない企業は切り捨てるという感覚がそもそも無いのだろう。

それではなぜ、このようなモーダルUIが一般的な市民権を得たのだろうか。 個人的にはiOSの文化が影響している気がする。 私は、モバイルアプリのエンジニアとしてAndroidとiOSを常に2台持ちして両OSの良いところ悪いところを常に見るようにしている。 iOSを使っていると頻繁にモーダルが表示され、ユーザの動作を止めるアプリが多い。
OSのAPIとしてSnackBarのようなフィードバックUIが存在しないというのが大きな理由だとは思う。 そのためGoogleのiOS用アプリだったり、UI/UXをきちんと意識している使いやすいアプリは独自でSnackBarのようなUIを実装している。

そもそも、iOSでは起動時の通知確認もモーダルで確認が行われる。 モーダルが割と頻繁に表示されるからiOSしか使っていないとあまり抵抗感が無くなるのかもしれない。
通知許可のモーダルは正しいUIだとは思うが、あえて代替案を考えるならば、マテリアルデザインにあるバナーのようなものになると思う。

`

モーダルとは若干異なるが、音量変更でさえiOS13までは画面の真ん中にデカデカと音量を表示していてユーザ体験を大きく損なっていた。(先日のiOSアップデートによってやっと変更) これも、YouTubeやInstagramは音量変更をフックして全画面に表示しないように独自で実装していた。

ios sound
`

もちろんモーダルが有効な場面はたくさんある。
その入力を行わなければ成り立たない場合であったり、重大なエラーを防ぐ場面ではとても有効なUIである。

重要な情報を提供したり、決定を求めたりするために使い、ユーザの動作を意図的に中断するため、慎重に使用する必要があります

モーダルUIを使うときは、ガイドラインのこの言葉を思い出し、本当にそのUIが最適か見直してから使うように心がけたい。
(ガイドラインが絶対に正しいということを言いたいのではない)

世界のトップランナーたち

もう一度言うが、 タイトルにもある「UI/UXをとるのか、金儲けをとるのか」という問題に対しては、どちらが正解というものはない。

事業を行っている以上は、売上をあげなければ生き残ることは出来ないし、儲かればそれでいいと言われれば、たしかにそうである。
みんなお金は大好きだし反論は出来ない。

それでは、世界のトップランナー達はどうだろうか?

FAANGと呼ばれるFacebook(Instagram), Amazon, Apple, Netflix, Google達やSlack, Uber, Lyft, Spotify, Microsoft, Twitter, GitHub etc...

世界のトップ企業と言えど、たまにどうして??というのもあるが、概ね彼らのサービスはどれもUI/UXが優れている。
ここでいうUI/UXは操作性以外のサービス全体としてのユーザ体験も含んでいる。
個人的にFacebook本体アプリ, Amazonのアプリは両OSとも使いやすいとは言い難い

例えばSlackを例に挙げる。
Slackは、サービス開発への親和性がとても高く、絵文字機能や、デスクトップ版アプリに留まらずスマートフォンのアプリの圧倒的使いやすさにより、 サービス開発の現場では、Slackを手放せなくなっている人がとても多いように思える。
かく言う私もその一人である。

GitHubも同様である。
GitHubは開発者向けのソースコードを管理するサービスである。 元々はGitHub単体で会社をやっていたが最近Microsoftに買収され圧倒的な資金を得たことにより、より開発スピードが上がったように見受けられる。
GitHubに似た同様のサービスは複数あるが、このサービスもまた、それらと比較すると使いやすさが段違いである。

他にも圧倒的使いやすさを誇るサービスはいくつもあるが、これらのサービスに共通するのは利用料金が決して安くないことである。
Slackに関しては、1番安いプランでワークスペース毎に¥960月/人、 GitHubもチーム利用だと、$9月/人とそこそこの値段がする。

多くの従業員を抱える企業だと、毎月あたりそれなりのランニングコストがかかる。 しかし、多くの企業はこれらのサービスに対して値段は高いけど支払ってしまう。
なぜならば他のサービスと比較して圧倒的に使いやすいからだ。 圧倒的に使いやすさやサービスとしての価値を高めたからこそ、小手先ではない方法で小手先以上の利益を上げることが出来ている。

圧倒的に使いやすいものを作ればいいのか

ただ残念ながら、もの凄く使いやすいものを作ったとしても、全てのサービスがこのように上手くいくわけではない。
私は以前YouTubeやN動画のような、ユーザ投稿型の動画サービスを作っていたのだが、 当時は世界中の動画アプリを研究し尽くし、使いやすさには徹底的にこだわり抜いて作っていた。
自分で言うのもアレだが知っていて使ったことがある方からはそれなりの高評価を得られていたと思っている。

FRESH! AndroidアプリのUI/UX

はじめに FRESH!でAndroid開発のリーダーをしているエンジニアの荒谷(@_a_akira)です。 役職としてはエンジニアですが、エンジニア目線でFRESHの縦化リニューアルに伴ったAndroidのデザインについて話したいと思います。 FRESHでは、基本的なデザインに関してはデザイナーがSketchでモックを作成した後にエンジニアとディレクターで仕様を踏まえつつ議論を重ねてブラッシュアップをしていきます。その後、各クライアント(Android, iOS, Web)に沿ったデザインに落とし込まれてエンジニアが実装する方式をとっています。Androidに関しては、私自身がデザインに関してかなり拘りがあるのでUI/UXの部分もエンジニアが深く携わる形をとっています。近年ではこのように、エンジニアとデザイナーの垣根がどんどん無くなってきています。弊社でも昨年頃からテクニカルクリエイターと呼ばれるポジションが提唱されています。詳しくはこちらをご覧下さい。 FRESHにおけるマテリアルデザイン ここでは、Android版FRESHのUI/UXを実装するにあたって主に意識した3つの要素を紹介します。 階層 (Elevation) 今更語る必要もありませんが、AndroidはGoogleのマテリアルデザインをベースとしてデザインをします。MaterialDesignは2次元のスクリーンの中に3次元(z軸)の概念が加わったものです。その為、FRESHのデザインを実装するにあたってz軸の概念は強く意識をしました。本家Material.ioでもElevationの項目が存在するので、そちらも参考にしてみて下さい。 FRESHのAndroid版の構成要素は主にApp bar(Tool bar)と呼ばれるタイトル等のエリア、Bottom navigation barとよばれる下のメニュータブ、プレイヤーの3つで構成されています。 そこに、放送予定画面のApp barの下に配置されている日付を表示するSticky viewとAndroid OS標準のSnackbar(Actionを持ったToastのようなView)を付け加えたものを図1にまとめました。上記のコンポーネントを疑似3次元上に表したものを図2に示します。   図1.

しかし、今見ている方で、このアプリの事を知っている人があまりいないように、このサービスは決して成功したとは言えない。
某N動画やアイドルがメインの投げ銭動画サービスよりはサービス全体で使いやすいものになっていたとは思うが、彼らに勝てはしなかった。

結局はコンテンツ次第というものではあるのだが、いくらUIが良くなくても、使いづらくても流行ってしまう日本という国が特殊なのか、 実は海外の大半もこうなっているのか、海外サービス事情にそこまで詳しくないのでわからないが、こういう現状は開発者として結構悲しい。

たしかにモーダルUIが利益を生むのもわかるし、営利企業の会社としてのサービスである以上売上が絶対必要なものではあるのだが、 圧倒的に使いやすく価値を届けたものが認められる世界になっていくと嬉しいなと思うし、そうしていくために活動していきたい。

© AAkira 2018