我々がSteve Krug氏に、ユーザーに考えさせてはいけないというアドバイスをいただいてから実に15年が経ちました。
題名にある「フリクション」は、ユーザーが目的を達成することを阻む混乱や動揺、ためらいといったユーザーを考えさせてしまう全ての事象のことを言います。
今回はデザインにおけるフリクションを取り除く方法をおさらいしましょう。
「フリクション」とは何か
Krug氏の説明していることは学術的に「認知的負荷（cognitive load）」と呼ばれるものであり、UXデザインではユーザーが注目すること及び脳に対して負荷をかけることを指します。もちろん認知的負荷は必要なものではありますが（下記で説明します）、通常はなるべく最小限にするべきです。
The Nielsen Norman Groupは認知的負荷は本質的なものとそうでないものの２つに分けられると言います。
本質的なのは「この“カテゴリー“のタブをクリックすれば、探していることが見つかるだろうか。」といった目的を達成するための負荷です。本質的でないものがまさにフリクションであり、「カテゴリータブはどこだろう。探せないな。」といったものです。
典型的な不必要なフリクションとは以下です。
・視覚的にごちゃごちゃしており混乱させたり気をそらすもの
・矛盾（「何でこのボタンは前のページで見たようなボタンじゃないの？」）
・不必要な決定や行動を促すもの
・不自然な特徴及び機能
フリクションは不意に発生するものなので、ユーザーの期待や過去の経験に沿って、あらゆる面で常にデザインには一貫性があるべきなのです。
どうしたらフリクションをなくせるのか
では、どうすれば上記のようなフリクションをなくしていけるのでしょうか。以下にプロジェクトの手助けとなるヒントを記しておきます（Interaction Design Best Practices: Volume 2という記事でフリクションのより具体的な排除方法を説明しています）。
１．ユーザーの行動フローをリスト化し冗長な部分を可視化する
ユーザーが行うであろうタスクを完了するまでに必要な動作をリストに書き出します。
例えばログインする際には以下の動作が必要となります。
・ログインのウィンドウを開くためにクリックする
・ユーザーネームを入力するために入力欄をクリックする
・ユーザーネームを入力する
・パスワード入力欄をクリックする
など
これらの最初の５つのステップからもすでに、冗長な部分に気づくでしょう。
ログインウィンドウが開いた時に、カーソルがユーザーネーム入力欄に最初からあったらどうでしょうか。ログインウィンドウが自動的に開くのはどうでしょうか。
Photo credit: Reddit
Redditはこのようにしてフリクションに立ち向かっています。コメントを残すのにログインを要する場合など、ユーザーが何らか動作を行おうとした際には、ログインウィンドウが自動的に開きます。頻繁に利用するユーザーはログイン情報を保存することも可能で、２回クリックするだけでログインが完了します。
しかも、これはただ動作の数を減らしただけではありません。それぞれのステップにおいて手間を省いています。そこが重要なのです。
UXPinのサインインのページをデザインするとき、同じ手法を使用しました。アプリ内にリダイレクトされるとパスワードを設定することができるため、メールアドレスのみを求めることにしました。
Photo credit: UXPin
２．一般的に認知されやすい明快なUIを使用する
ユーザーが何か新たなものに出会う際は毎回、フリクションが発生しています。他のサービスやアプリなどの外的要因との一貫性を保つためにも、なるべく適切なUIパターンを使用しましょう。
Photo credit: Patterns
メールは明らかにメールだと分かる封筒アイコンを使うなどし、ユーザーに余計なことを考えさせないようにしましょう。例えば、Web UI Design Best Practicesで説明されている、初期設定や、説明を用いて動作を行わせるもの、ステップを踏んで進めるものの例はフリクションを除去するのに特に有効です。
また、小さなキャッチコピーにおいても、今までに見てきた見慣れたものが有効です。例えばボタンにおける「投稿する」というテキストは明確ですが、「次へ行く」は一瞬ですが混乱を招いてしまう恐れがあります。
明快であることが常に第一です。
３．ユーザーリサーチに基づいて操作方法を示す
ナビゲーションが適切でないことで、フリクションを生み出してしまうことは多くあります。
時間をかけて最適なナビゲーションを確立することもできますが、ユーザーから学ぶことでプロセスを合理化しましょう。正しいユーザーテストによって、ユーザーがどのように情報を分類し接続するか分かってきます。
カードソーティングは自然な思考パターンを基にしてサイト構造を作るのに極めて有効です。構造を作り終えると、ツリーテストで情報経路をチェックするのに役立ちます（カードソーティング及びツリーテストに関してはThe Guide to Usability Testingでより詳しく説明されています）。
４．きちんと分類・グルーピングする
ひとかたまりとしてグルーピングすると、視覚的要素が持つ意味をより分かりやすく伝えることができます。
Etsyは16種類の商品イメージを展示しています。これが別の状況だと、ユーザーを混乱させるかもしれませんが、ここでは各４つを表示させグループ分けすることで視覚的フリクションをなくしています。
Photo credit: Etsy
この方法は脳の記憶の限界を克服するために有効です。それは10桁の電話番号を３つのかたまりに分けるのと同じ効果があるのです。それぞれのかたまりがどのように理解されるべきか提案することでユーザーに情報処理を促し、ユーザーが興味のない部分は無視できるようにすることもできるのです。
良いフリクションとは？
フリクションを全面的に排除し始める前に、状況によってはフリクションは有益にはたらく場合もあるということを覚えておいてください。
１．成功体験を演出する
すんなり目的を達成させるより、たまにはユーザーに敢えて努力してもらうことが有効なときもあります。コンテンツを発見することが主目的のサイトなどを思い浮かべてください。ここで大事なのは必要のない情報をより分け、ユーザーが本当に欲しい情報を発掘できたときの喜びではないでしょうか。
この発見に至るまでのプロセスはユーザーに成功体験を演出し、より感情的に入れ込んでもらうことができます。
２．ユーザーをふるいにかける
特にユーザーがサイトのコンテンツを作り出していくようなサイトでは、フリクションによって、ロイヤリティの低いユーザーをふるいにかけることができます。
より込み入った登録プロセスなどは、コミットメントの低いユーザーを除外することができます。
例えば、Dribbbleの魅力は紹介制であることです。希少価値を生み出すだけでなく、更にフリクションによってクオリティーが低いポストやスパムとなりうる投稿を除外することができます。
Photo credit: Dribble
３．ユーザー自身からユーザーを守る
例えば核兵器の起動スイッチは厳重なプロテクションのかかったカバーがついています。同じ法則がUXデザインにも適用されるべきです。
取り返しの付かないような行動に対しては、フリクションはそう悪いものではありません。「取り消す」コマンドなどは個別の小さいミスに対しては有効かもしれませんが（例：間違えて顧客リストからアカウントをひとつ消してしまうなど）、「確認」ウィンドウは重大なミスが起こる前に一旦停止を促すことができます（例：間違えて全顧客リストを消してしまうなど）。
Photo credit: Salesforce IQ
終わりに
上記でも述べましたが、もう一度書いておきましょう。基礎的な部分をきちんと行いましょう。
UXデザインにおける数々の原則は基本フリクションを取り除く方向で考えられているため、基礎さえできていれば間接的にフリクションは軽減することになります。特に注意するべきことは以下です。
・一貫性：なければ混乱を招きます
・視覚的なヒエラルキー：視覚的に正しい道筋をユーザーに示します
・ナビゲーション：道に迷ったユーザーは何も成し遂げられません
フリクションについて更に知りたい方は、上記にも記載しましたが以下の無料ガイドもチェックしてください。
