User Onboardingというサイトは、web/スマホアプリの入会フロー、ユーザ登録やチュートリの画面遷移を、ページごとに解説してくれてるサイト。

サイトの文言やボタンの内容 / 配置 / 色選択、スペースの取り方、ページごとの意味付けなど、ビジュアルのデザイン以外についても、何をどのように修正すべきか（たまに褒めてもいますが。）を詳細に説明してくれてます。UIデザイナーだけでなく、サービスづくりに関わる人全ての参考になると思います。

サイトの存在には気づいていたのですが、これほどコンテンツが増えてるとは気づきませんでした。26個のサービスが紹介されていて、全部のスライドを見る価値あります。自分は一晩中かかって制覇しました。こうやって各サービスを比較すると、SlackやTrelloは本当によくできてますね。逆に相当ダメだしされているサービスも、反面教師という意味で、勉強になります。

• notificationなどのユーザ同意やソーシャル機能を利用しての友達紹介を、そのユーザがまだサービスのメリットを理解していない、世界観にひたっていない段階で要求してしまう。
• 自社の他のサービスもついでにレコメンドしたい気持ちはわかるが、入会フローから最初の利用に至るユーザの流れの妨げになってはいけない。レストランにきて、まだメインの食事をどうするかメニューで迷っているときに、デザートのワゴンをもってきて勧められるようなもの。
• キャッチコピーは、そのサービスが何をできるか（機能）ではなく、そのサービスで何ができるか（メリット）をうたうこと。

などのポイントは、ローンチが迫って時間が足りなくなると、ついチェックが中途半端になり、やってしまいそう。

また、最近大流行りのProduct Huntは、ローンチ前のプロトタイプをInvisionにアップして、250件のフェードバックをもらってブラッシュアップしたという記事が載ってました。dribbbleのような1枚のスクリーンショット単位が中心のビジュアルチェックもよいですが、Invisionのようにバージョン単位で画面遷移をシェアできる便利なソリューションを利用して、事前にユーザコミュニティに公開してつくっていくようなアプローチは増えていくんでしょうね。

ちょっと長くなりましたが、ここまでが前置きで、さて本題。

Dropboxのスマホアプリが、「webで既に利用しているユーザが前提のつくりになっていたので、モバイルファーストで、モバイルではじめてDropboxを利用する人を念頭において、フローをつくり直した。」という話がブログで紹介されていました。

スマホ側の入会遷移をどう工夫したかは、原文を読んでいただくか、このサンプル画面を見ると概ねわかるかと思います。

それよりも、ものすごく関心したのは、PC版との連携への誘導フロー。Dropboxの場合、もしスマホから使いはじめたら、「必要なときにはPCのブラウザで閲覧してね。」で完了ではなく、PC側でもDropboxアプリをダウンロードしてもらわなくては、各デバイスで連携するサービスのよさを理解してもらえない。今、ユーザが入会に使っているデバイス（スマホ）以外のデバイス（PC）でのダウンロード操作をしてもらうという、かなり難易度の高い障壁。

それを、

• スマホ側の進捗チェックリストでユーザにフローの存在を周知し。（参考画面）
• スマホの画面に表示するバーコードをPCに読み取らせて、PC側で簡単インストール。（参考画面）

というフローにしています。

これで、だれでもフローを完了してくれるという万能薬的なソリューションではないですが、サービスを改善しようと、ここまで工夫している姿勢がよいですね。

スマホ以外でのデバイスでも利用されるサービスの場合は、「モバイルファースト」は単に「スマホアプリからつくる。」ということでなく、

• ユーザがどのデバイスをどういうシチュエーションで、どの程度利用するか
• デバイスごとの最適な入会フロー
• デバイスを変更しながら利用する場合のユーザエクスペリエンス

のイメージを描きながらスマホアプリをつくりはじめるということになるので、「モバイルファースト」の意味は深いですね。

#ui #ux