アプリの導入画面「ウォークスルー」のデザインで気をつけたい5つのこと

anthony

UX Movementの著者であり、編集長です。明確で効率的なデザインに美しさを見出し、ユーザーのために闘うことが好きです。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

How to Design a Walkthrough That Users Will Read

新作アプリにとって、ウォークスルーはいわば「取扱説明書」のようなものです。

ウォークスルーは、新しいユーザーがアプリを起動したときにまず表示される、アプリの機能についての簡単なガイダンスのようなものです。新しいユーザーが戸惑うことなくアプリを使うために活用されます。

アプリからウォークスルーを無くしてしまうと、ユーザーを混乱させてしまう可能性があります。逆にあったとしても、読みにくくわかりづらいものであれば結果は同じです。ユーザーはウォークスルーを面倒に感じ、読み飛ばしてしまうでしょう。

ウォークスルーは、ユーザーにアプリの使用方法を理解してもらうため、読んでもらえるようなものであるべきです。そのためには、明確なナビゲーションにし、読みやすいテキストにしましょう。また、ユーザーが再度参照する必要がある場合に、いつでもあとから見れるようにするべきです。

見やすいウォークスルーにするためのコツ

読みやすいテキストにする

読みやすいテキストというのは、要点を簡潔且つ明確にまとまっているものです。できる限り少ない文字数で、伝えなければならないことを述べ、短文の見出しを使って簡潔に論点をまとめましょう。見出しの下に本文として説明を入れても良いですが、短くしましょう。

ナビゲーションの近くにテキストを配置し、ユーザーがあちこち見ないで済むようにしましょう。こうすることで、ナビゲーションとテキストとの間の距離が縮まり、ユーザーの目の動きの負担が軽減されるので、より少ない労力でより素早く読み進めることができるでしょう。

walkthrough-text

明確なナビゲーションにする

デザイナーによっては、ウォークスルー用のナビゲーションボタンを取り除く人もいます。その代わりに、ページネーション用のドットだけを表示し、ユーザーがスワイプすることを想定するのです。

ですが、これではユーザーがその小さなビジュアルを見落とす可能性が高く、また見つけたとしても、ドットがスワイプを意味していることが直感的にわかりません。

ユーザーにナビゲーションを探させてはいけません。「次へ」というラベルのついたボタンなど、明確なナビゲーションを使用して、ユーザーがどう進めればいいのかについて疑問を持たせないようにしましょう。ボタンは、直感的にタップできるようにします。タップは、全てのユーザーが知っている方法だからです。もちろんスワイプできるようにしておいても良いですが、ボタンは用意しておいたほうが良いでしょう。

walkthrough-navigation

CTAボタンを最後に設置する

ウォークスルーの最初にCTA(行動喚起)ボタンを設置することは、良いアイデアではありません。

そうすると、ユーザーはウォークスルーを読み飛ばしたくなってしまうでしょう。多くのユーザーは、必要ないと感じるからウォークスルーを飛ばすのです。ただし読み飛ばしてしまうと、ユーザーは戸惑ってあとからヘルプページを探すことになるかもしれません。

CTAボタンを最後に設置することで、ユーザーにウォークスルーを読み飛ばす選択肢を与えずに済みます。これは長い目で見ればユーザーにとってより良い方法です。

walkthrough-button

アプリの使用方法は画像で示す

デザイナーによっては、ウォークスルーの中でアプリの機能をしつこく勧め、ユーザーに対してその良さを売り込み続けます。

ユーザーがアプリをダウンロードした後は、もうそれ以上売り込む必要はありません。その代わりに、ユーザーはアプリの使用方法を理解する必要があるのです。画像を使ってUIを表示し、機能を使用するために何をタップしたりスワイプする必要があるかを、正確に示すべきです。

walkthrough-feature

あとから参照できるようにする

ウォークスルーを終えた後でも、ユーザーはまたそこに戻って参照する必要があるかもしれません。ナビゲーションメニューにリンクを配置し、ユーザーがウォークスルーをあとから取り出しやすくする必要があります。ツアー、チュートリアル、使い方など、リンクにラベルを付けると良いです。

まとめ

ウォークスルーは公園を散歩するような気分で通り抜けられるのが理想です。読み進めるのが苦痛なウォークスルーは、ユーザーに読み飛ばされてしまいます。ですが、短くて有用なものにすれば、ユーザーは問題なく目を通すでしょう。

ウォークスルーは、ヘルプやサポートページではありません。ユーザーがアプリを使い始めるのを助ける、機能の簡単な概要なのです。使用方法についての詳細な情報は、ヘルプ及びサポートページに記載しましょう。

ユーザーが取扱説明書を飛ばす一つの理由は、読むのに時間がかかり、ややこしいからです。ウォークスルーは取扱いを説明するためのものですが、同時に「取扱説明書」のようであってはいけません。いわば付箋のように読みやすいものであるべきなのです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて