2014.6.23 / UI

ユーザーとサービスの最初の出会いでのUIデザイン

Tomohiro Suzuki

はじめまして

このブログに興味を持って頂きありがとうございます。そしてはじめまして。STANDARDでデザイナーをしている鈴木智大と申します。本日よりこのブログの執筆をさせて頂きます。私にとっては、ブログを読んで頂ける一人一人がユーザーであり、このブログ自体がサービスです。しかし、まだこのブログというサービスがどのような形でゴールを達成するかは明確には考えていません。ゴールは今後、ブログを読み続けてくれるユーザーの声を聞くと共に、私自身も発見と学習を重ねることで一緒に作ることができればと思います。


ユーザーがサービスを最初に使い始め、まず出会う画面に会員登録の画面があります。サービスの改善フェイズでは、問題がないかをまず第一に注目する部分のひとつです。改善にあたり、この登録画面がユーザーにとってのハードルとなり、予期的UXから一時的UXの間の体験にギャップが生まれていることがよくあります。サービスの入り口とも言える、この会員登録画面で問題が発生していると、サービスを使ってもらうスタートラインにすら立てません。

改善が必要だと思われる例として、下記のサービスがあります。

こちらはNike Training Clubのアプリケーションで、いつでもナイキのプロフェッショナルトレーナーが開発したワークアウトを見つけることができるという素晴らしいサービスです。WebサイトやAppStoreのスクリーンショットでは、実際に人がワークアウトを行なっている内容が表示されており、どんなサービスなのかが理解しやすい形で示されています。

しかし、アカウントを持っていないと、最初に上記のような非常に長い入力が求められるのは、とても残念なことです。さらにこれだけの項目があるにも関わらず、非常に効率が悪い入力の仕方を求められるため、かなり苦戦して登録を行ないました。

今回は「最初の一歩を踏み出してもらうためのUIデザイン」ということで、登録画面をテーマにして、どのようにインターフェイスを設計するのが良いかの基本を、各項目ごとに分けて紹介していきます。しかしあくまでも紹介するのは基本であって、どのようなユーザーが使うかによってさらに最適化をする必要があります。

1, 適切な初期値を提供する。

初期値が入力に影響を与える部分では、ユーザーの入力を少しでも楽にする設計を心がける必要があります。Nike Training Clubの生年月日の初期値は「1900年」ですが、このアプリケーションを使う人で、1900年から選択したほうが楽な人はいないでしょう。スクリーンショットなどから推測すると、おそらく20代~30代の女性がターゲットではないかと考えられます。それであれば、1980年~1990年くらいの位置に初期値を設定することで、ユーザーが選択にかかる時間を数秒短縮できるはずです。また、ここには表示されていませんが性別の欄もあるので、ターゲットに合わせてデフォルトで女性の初期値を入れておくことで、選択の手間を省くことができます。

2, 編集に適したフォントを用意する。

見た目での美しさはもちろん大事ですが、モバイルアプリケーションでは利用環境も考えてフォントを指定する必要があります。上記の例ではCondensedのフォントを使っているのですが、間違いに気づいてテキスト部分を長押しした時に、目的のポイントにフォーカスを当てることは困難です。私は自分のデスクで座りながらこのアプリケーションを利用していましたが、これが歩行中などではどうでしょうか。たしかにCondensedのフォントは狭いエリアにも多くの文字を入れることはできますが、それならばフォームの横幅をもう少し広くしてでも、ユーザーにとって編集がしやすく、認知しやすいフォントを指定するべきです。

3, エラーを許容する

人が入力をするものであれば、当然ミスも発生します。そんな時は最小限の労力でやり直せるようにユーザーをサポートしましょう。上記の例では、次の画面に進もうとしたらユーザー名が既に使われているため、またこの画面に戻ってしまいました。既にこの名前が使われているということは理解できたので、できればユーザー名の箇所だけを修正して次に進みたいのですが、生年月日までもがリセットされてしましました(あの1900年から選択する必要がある生年月日の入力がです)。これでは問題の箇所を修正することはできても、他のやり直しになった箇所で入力のミスを誘発する可能性があります。

4, エラーを発生させない。

起きてしまったエラーは可能な限りサポートするべきですが、そもそもエラーは発生しないように勤めるべきです。上記の例では、パスワードのセキュリティを高めるために1文字ごとにチェックを行い、正しい入力形式であるかどうかのフィードバックをしています。これなら、ユーザーがガイドに気づいてさえいれば、次の画面から戻って入力をやり直すことは少ないでしょう(ここまで細かい必要があるかは置いておいて)。同様に他の部分でも「何が間違っていて」「どのように修正すれば良いか」を表示することができるはずです。常にメッセージを表示しておくのが負担となるのであれば、インタラクティブに表示することも検討できるでしょう。

また、入力形式によって発生するエラーも対処できるようにしましょう。小さなことですが、郵便番号の入力も「-(ハイフン)」などは人によって入力したりしなかったりということがあります。しかし、システム側で文字列を正確な形に処理することでユーザーにエラーを感じさせないようにできます。その点では、Nike Training Clubでは「-(ハイフン)」の有無に関わらず次の画面に進めるため優秀です。たしかに実装の手間はかかるかもしれませんが、その実装で100万人のユーザーが入力にかける1秒を削ることができれば安いものです。

5, ソーシャルログインを検討する

ユーザーの入力を軽減するためにはソーシャルログインは非常に有効です。面倒な入力の手間を省くことでき、人の入力によるミスも防ぐことができます。

しかし、ただソーシャルログインの機能を使うだけではなく、最適な形で提供できるようにしましょう。Nike Training ClubではFacebookログインはありましたが、一度Facebookにログインしてから許可を求め、もう一度他の情報の入力を求めるためにこの画面にやってきました。可能であればOS認証を検討しましょう。さらに取得できる情報をメールアドレスとユーザー名だけではなく、生年月日もユーザーに変わって入力してあげることができるはずです。

6, 段階的に入力

全ての情報の入力を一度に求めるのではなく、段階的にユーザーに入力を求めることで負荷を軽減することができます。例え任意の情報であっても、存在しているだけでユーザーに負荷がかかります。ユーザーが「今」必要だと理解していない情報の入力を求めることは避けるべきです。まずはサービスのコア体験をするために必要最低限の情報で使えるように項目を設計しましょう。その後、追加で情報を入力しないと利用できない機能はその時に入力してもらうようにすることで、最小限の労力でサービスを使うことができます。

7, 登録情報の必要性を検討

一番最後にこの項目を持ってきてしまいましたが、まずはこの項目こそ1番最初にチェックするべきです。Nike Training Clubのアプリケーションでは、これだけの入力項目がありますが、そもそも生年月日や郵便番号は必要なのでしょうか。もっと追求すると、会員登録自体無いと成り立たないサービスなのでしょうか。サービスのコア機能であるものがワークアウトのビデオであるならば、登録をしなくてもユーザーはその機能を使えるはずです。ユーザーが最短距離でサービスを体験できるためには、どんな情報が必要なのかをもう一度検討しましょう。


以上、ユーザーに最初の一歩を踏み出してもらうためのUIデザインとして、新規登録をテーマとしてまとめてみました。一番見直して頂きたい内容としては最後に紹介している「7,登録の必要性を検討」です。私たちは多くのサービスに慣れてしまったことで、新規登録が必要なものという先入観に捕われすぎているのかもしれません。ユーザーの目的は会員登録ではなく、サービスから得られる体験だということを、もっと意識する必要があります。百聞は一見に如かず、まずはゲストアカウントでも良いので使ってもらうことはできないか検討しましょう。もしその後、ユーザーがあなたのサービスの本当のファンになったのであれば、喜んで登録をしてくれるはずです。

お互いの学びと成長を促せるメンバーを募集しています

STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。

そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。

あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。

記事一覧へ

Related Articles

About us

私たちはユーザーへの価値とビジネスの成立を実現するUXデザインを提供し、
アプリやWebサービスの新規立ち上げや改善をサポートしています。

STANDARDはUXデザインを軸に、新規事業の立ち上げや既存サービスの改善を支援するデザイン会社です。