摩擦のないUXデザイン：スムーズなユーザーフローを生み出すには

20年ほど前、Steve Krugは「ユーザーに考えさせるな」というアドバイスを私たちに残しました。今日、ユーザー側で極力努力しないで済むように、デザイナーは努力をしています。

摩擦のないインタラクション（Frictionless Interaction）は、UXを定義するものとして一般的に使われるようになりました。デザイナーやディベロッパーにとって、負担のないインタラクションを生み出すためのメソッドを身につけることは大切です。

この記事では、フローの中でユーザーの負担になりやすいステップを分析し、それらを最適化するための解決策を提案していきます。まず、ユーザーにとっての「摩擦」とは何を指すのかについて、定義する必要があるでしょう。

摩擦とは、ユーザーがプロダクトとのインタラクションの中で目的を達成するのを妨げる要素を指します。テクノロジー上の関係で難しさを感じ、ユーザーが不満に思うこと全てともいえます。摩擦の多いツールほど、すぐに放棄され、ユーザーはより摩擦の低い優しいツールを使うようになります。

摩擦のない体験を作る

最終的に、エンドユーザーはプロダクトと関わる際にはシンプルさを求めます。摩擦のないデザインとは、ユーザーにとって物事を簡単するデザイン、すなわちシンプルなデザインを指すのです。摩擦のない体験を考える際、それはユーザーが何も学ぶことなく使いこなせるプロダクトのことを我々は想像します。このようなプロダクトにおいて、インタラクションは直感的に、全てのオペレーションは滑らかに行われます。

摩擦のない体験を生み出すにあたって、ユーザーがどのようにUIとインタラクトするのか、デザイナーは深く理解する必要があります。UXの摩擦を削減するために、デザイナーはまずユーザー行動を把握する必要があるでしょう。そうすることで、どのタイミングで摩擦が起こるかを理解し、それにしたがってプロダクトをデザインするのです。

ユーザー行動の全体像を把握するために、ユーザーのゴールが何なのかを理解するよう勤めてください。そうすることで、システムやサービス上でユーザーの踏むステップが理解でき、それぞれのステップで起こりうる問題を把握できます。

ユーザーリサーチやテストの実施、ユーザーフローの作成、使用しやすいインフォメーション・アーキテクチャーを実際の開発前に作成することで、摩擦が起こりやすい場所を把握できるでしょう。

摩擦を避けるには

ここからは、デザイン上の摩擦に対応するための実用的なポイントを紹介していきます。

余計なコンテンツでユーザーを迷わせない

UXにおいて、規定のユーザーフローにユーザーの注目を集めることが最も重要です。ユーザーフローへの注目度が高いほど、ユーザーは努力をすることなく目標を達成できます。しかし、他のコンテンツによってUIでユーザーを圧倒してしまうと、ユーザーは規定のユーザーフローを見失ってしまう可能性があります。

そこで、以下の手法を試してみてください。

1. 余分なものは省く

余分な情報、余分なUIエレメントなど、ユーザーフローにとってムダな要素は全て省きましょう。「より少ないことは、より豊かなこと（less is more）」というミニマリズムの教訓を思い出してみてください。ミニマリズムに従い、重要な要素だけを盛り込んだレイアウトを作りましょう。

2. コンテンツを1ページに盛り込まない

伝えたい情報の全てを1つのページに盛り込もうとしないことが肝心です。UXを考慮した上で、コンテンツの優先度を決めてください。例えばあなたが会社のウェブサイトをデザインしていたとしたら、ホームページに全ての情報を盛り込むよりも、コンテンツを異なるセクションに分割してみましょう。

3. 分割して伝える

人間の脳には限界があり、単位ごとに区切って理解する傾向があります。段落つけは、現在のUIデザインにおいて区切りを使用している最も一般的なもののひとつです。長いものや複雑なフォームは分割し、いくつかのシンプルな区切りを作ることで、より分かりやすいデザインにすることが可能です。

▲印象的にホワイトスペースを使用したミニマルなレイアウトの事例

ユーザーに考えさせない

システム側のアクションの少なさは、UIにおけるよくある問題のひとつです。ユーザーが何かしらのアクションを起こした際、システム側から何も応答がなければ、ユーザーは不安になってしまいます。その結果、ユーザーは繰り返し同じアクションを試すことになりかねません。連続タップなどはその事例のひとつで、こうしたアクションはシステムエラーを引き起こしかねません。

ユーザーの連続タップを避けたければ、以下の方法を試してみてください。

1. ビジュアルあるいは音声による反応

ユーザーのアクションに対してしっかりとした反応のあるアプリは、ユーザーの不安を軽減させる傾向にあります。

2. ロード時間を早める

コンテンツがロードをするのを待つ行為も、ユーザーにとって摩擦となります。ロード時間が長ければ長いほど、ユーザーはシステムが正しく動作しているか心配になるでしょう。デザイナーや開発者は、ユーザーの期待に答えるようにページのロード時間を削減する努力をしましょう。

3. ローディングを透明化する

長いロードを要する場合は、どれほどの時間がかかるのかの情報を、ユーザーに提示してあげることが重要です。

▲ユーザーインタラクション上のビジュアルフィードバック

多機能なものよりもわかりやすさ

わかりやすさはUXに直接影響します。良いUIは、ユーザーの期待と過去のデータに寄り添っているものです。ユーザーが何を期待して良いのかさえ分かっていれば、ユーザーとサービスとのインタラクションはより良いものとなります。

UIをよりわかりやすくするために、以下の方法を試してみてください。

1. エレメンツを明確にラベル化する

ボタンなどのインタラクティブな要素は、そのファンクションを説明するラベルを表示して明確に区別しましょう。

2. デザインを一貫させる

一貫性のないデザインは混乱を生みます。ひとつの要素がウェブサイトやアプリの異なるページで違うデザインで表示されていたら、ユーザーは混乱するでしょう。一貫性のあるデザインを維持することで、ユーザーはそれまでの記憶に頼ってプロダクトとのインタラクションを続けられます。

3. 難しい言葉・一般的でない言葉は使用しない

ユーザーに馴染みのない単語は極力避けるようにしましょう。

4. シンプルでわかりやすいナビゲーションを用意する

ナビゲーションが乏しいと、ユーザーの不満を招きかねません。プロダクト内の異なるページを、ユーザーが簡単に操作できるよう、シンプルでわかりやすいナビゲーションを用意しましょう。

5. 一定のUIのパターンを使用する

新しいことが起こるたび、それはユーザーにとって摩擦になります。一定の決まったパターンに基づいてデザインすることで、ユーザーの学習量を削減しましょう。UIのパターンを認識することで、ユーザーはより複雑なタスクに対応できるようになります。

▲明確なラベル付けとわかりやすいメニューバー配置によって、ユーザーはタスクを簡単に処理できます

ステップ数を短くする

ユーザーフローのステップ数が多すぎると、必要以上に摩擦が生じてしますものです。最初のサインアップから個々のオペレーションまでの全てのステップには、ある程度のユーザーの努力を要します。ユーザーフローの中で余分なステップは取り除きましょう。ユーザーフローを作成する際には、KISSの原則（Keep it simple, stupid.）を念頭におき、摩擦を起こしうるステップを取り除きましょう。

具体的な方法をいくつか紹介します。

1. デフォルト設定を規定しておく

デフォルトの設定をユーザーが変更することは非常に稀です。Jared Spoolの記事「ユーザーは設定を変更するのか？」によると、ユーザーの僅か5%がデフォルト設定を変更するとされています。

デフォルトの設定は、あらかじめシステム側で規定しておきましょう。

2. パーソナル化された体験を提供する

ユーザーが持っている情報を使用して、パーソナルな経験を提供してみてください。例えばAmazonやNetflixは、購買履歴や検索傾向から個々人に合わせたオススメを紹介しています。

3. 自動記入機能を使う

いくつかの事例では、ユーザーを煩わせることなくUI上のデータを自動で記入させることも出来ます。例えば、あなたのモバイルアプリでクレジットカード情報が必要であるならば、スマホのカメラでのカード読み取り機能を導入することで、一から情報を打ち込むプロセスを省けます。

▲Microsoft Wordによるデフォルトセッティングの事例。デフォルトで自動セーブがオンにされている。

エラーを避ける、エラーに上手く対応する

良いアプリは、ユーザーが極力エラーを起こさないように設計されています。たとえエラーが起こったとしても、エラーが起こった場所をユーザーに知らせ、問題を解決するために何をするべきかを丁寧に説明するテキストを表示しましょう。

具体的な方法をいくつかご紹介します。

1. 起こりうるエラーを予測する

起こりうるエラーを予測したならば、その問題が起こる場所に合わせてより良いデザインを作るべきです。例えば、ユーザーがエラーに対応するためのガイドラインを表示できるでしょう。

2. インライン型のリアルタイムアラートを使用する

ユーザーのインプットを検証し、フィードバックを出来るだけ早く提供するために、インライン型のリアルタイムアラートを使用しましょう。リアルタイムアラートは、ユーザーが間違いを発見し修正するのをサポートます。

▲インライン型のリアルタイムアラート例

まとめ

もしユーザーとサービスの間に摩擦が発生すれば、ユーザーインタラクションは円滑に行われることはないでしょう。デザイナーは、こうした摩擦を発見し修正することが大事です。

戦略的に摩擦を削減することで、素晴らしいUXを生み出すことができるでしょう。

（原文：Nick Babich 　翻訳：Mariko Sugita）