この記事は、UX DAYS TOKYO 2017で開催されたStephen P. Anderson氏の「Friction, More or Less〜フリクションが必要な場合もある〜」講演レポートです。必要なフリクションとは？ 6つのフリクションを徹底解説しています。
Stephen氏のスピーチの様子
フリクション（Friction） = UIの”ひっかかり”をなくす
ここ数年、UI改善において「使い勝手を良くする＝ユーザビリティを上げる」から「いかにしてユーザにやる気を持たせるか」という点に興味が移ってきました。
Stephen氏は「コンサルテーション・分析をするとき、心理学の話をするだけでなく、フリクションの話を必ずします。」と冒頭で述べていました。
具体的な話の流れとしては、まずは以下のことを提案します。
- より明快に簡素なことばで記述しましょう
- テキストを短くしましょう
- ローディングを短くしましょう
つまり、使い勝手を良くする(ユーザビリティを上げる)ための施策を打ちます。
そのような課題が片付いてきたら、フリクションを無くすことを提案しています。
フリクションによって人の振る舞いも変わる
かつてのドリンクバーと現在のドリンクバー
かつてのドリンクバーは、好きな飲み物を好きな量でカップに注ぐ仕組みでした。
子ども達はおもしろがって何種類ものドリンクを混ぜてSucide drinkと呼んで楽しんでいました。
ところが新しいタイプの自販機はタッチスクリーンになり、1種類のドリンクだけ出てくるようになり、かつて子ども達が楽しんでいた遊びができなくなってしまいました。
フリクションをなくすことで、このように行動を抑制してしまう場合もあります。
つまり、必ずしもフリクションを全てなくすことが、確実な正解とは言えないということです。認識されている通り、除くべきフリクションがある一方で、除くべきか検討する必要があるフリクションも存在します。
６つのフリクション
フリクションは大きく6つのタイプがあります。
- 悪いフリクション(BAD FRICTION)
- 見えないフリクション(UNSEEN FRICTION)
- 境界フリクション(BOUNDARY FRICTION)
- 意図的なフリクション(INTENTIONAL FRICTION)
- 学習フリクション(LEARNING FRICTION)
- 外的フリクション(EXTERNAL FRICTION)
6つのフリクションのの紹介
悪いフリクション（Bad Friction）
1つ目の悪いフリクションは、必ず取り除くべき存在です。
道に穴が空くようなもので、道に穴が空いていれば車はその道路を通れません。必ず取り除きましょう。
例：ワークショップ開催の申し込みフォーム
参加人数を入力するのに「40くらい」「30-40」「35？」といった曖昧な入力をゆるさず、数値のみの入力が要求されます。
ところが、ワークショップ計画時に正確な人数がわかるはずないので、これはとても使いづらい悪いフリクションとなります。
アメリカンエアラインのミスを誘発する航空券の購入プロセス
例：American Airlinesの典型的航空券購入プロセス プロセス5/6での画面
次にアメリカンエアライン（American Airlines）の航空券購入プロセスを紹介です。
航空券をWeb上で購入できるのですが、入力フォームに情報を入れ、6ページ中5ページ目の最下部にStart Over(最初からやり直し)ボタンがあります。Start Over(最初からやり直し)ボタンが、なぜか？ユーザの一番目の行くところに設置しています。
間違って押してしまうと、それまで入力したものが無くなってしまいます。パスポート情報や席などの指定もあり、その入力はおよそ15分はかかっていますが、それらがこのボタンを間違って押してしまうことで一瞬でリセットされてしまいます。
次のプロセスに続きそうな場所にある、目立つこのボタンを押してしまうとここまでの申し込みプロセスがリセットさてしまいます。とてもフラストレーションがたまる例です。
プロセス5/6での画面、当該のページ全体をページを内容に沿って色分けしたらこうなりました（複雑です）
Upselling（広告）などもあり、ほとんど読み飛ばされてしまうのではないでしょうか。そして、次のプロセスに行こうとして右下のボタンを押すと今まで入れたデータ消えちゃって悲しいです。
プロセス5/6での画面下にStart Over(最初からやり直し)ボタンが設置
文言の意味と文字のカラーリングの不一致
上記のような表示が出た場合、文字を読む前には警告文のように見えますが、文字を読んでみると「質問は設定されました。」と、普通のアナウンスでしかありませんでした。
つまり、見た目(文字のカラーリングやデザイン)と内容(文言の意味)が整合していないのです。原則として、正常系の場合は緑色、異常系の場合は赤色を使用することが、あるべき姿です。
正常に動いているのであれば、下の例のように緑色を使うことで、直感的に正常に動いていると読み取れます。
正常なメッセージであれば下のデザインのようにすべき
悪いフリクションまとめ
悪いフリクションを見分けたり避けるための手段として、Stephen氏は以下のように示していました。
ユーザーインタビュー、レビュー、わかりやすい言葉の利用、利用頻度の高いパターンなど
見えないフリクション(Unseen Friction)
2つ目の悪いフリクションは、見えないフリクションです。
経験を通じて分かっている取り除くべきフリクションであり、対応策も明快です。一方、見えないフリクションとは、顕在化していない課題をどのように取り除いてUXを改善するのかという対応策を練る必要があります。
Card.ioにおけるクレジットカード情報の入力方法
Card.ioではスマートフォンでクレジットカードの情報を取り込む際に、キーボード入力ではなく、カメラで撮影をします。そうすることで、ユーザの労力を軽減させています。
以下の画像は様々なサービスにおけるクレジットカードの入力画面の例です。
例:Card.ioにおけるクレジットカード情報の入力方法
入力項目が複数存在し、とても複雑で手間がかかる印象です。
（入力画面のUIを細かく改善するのではなく）内蔵カメラでクレジットカードを撮影するだけという、とてもシンプルな方法に変えたことで劇的に入力しやすくなりました。
例：カメラによるクレジットカード情報の読み取り
AT&Tの支払い画面
AT&Tというアメリカ最大手の電話会社から請求書がメールで送られてきて、料金を支払いする場面です。
例：AT&Tのログイン画面
システムにログインしなければなりませんが、頻繁にログインするわけではないのでログイン情報を覚えていないことがよくあります。
リマインド等を駆使してやっとログインするとUp selling等の広告が表示され、進んでいくと請求書にたどり着きます。請求書に対しても多くの手順を経てやっと支払いが完了するという仕組みになっています。これではフリクションがありすぎて、支払いをすることが億劫になってしまいます。
一方、料金を払い忘れてしまったときに「お支払いを忘れているようです。支払う場合は”1”を送ってください」とSMSに連絡が来ます。“1”と送ると支払いが完了し、確認メッセージが届きました。
例：SMSでの支払い画面
Webではログインをした後に、複雑な手順をいくつも踏まなければいけませんでしたが、「その仕組みは何のために存在していたのだろう・・・」と感じるほど簡単です。
その他の見えないフリクションの事例
Slackはフリクションを減らすためにとても積極的な改善が行われています。例えばチャンネルをしばらく使っていないと、システムからアーカイブ化の提案がされます。
ユーザからしたら、アーカイブすべき対象(=現在は使用していない存在)は、発見しづらいため、サービスが提案してくれると非常に便利です。
Gmailでは送信されてきた文章を人工知能で解析し、返信の選択肢がリコメンドされます。多くのユーザは返信文をリコメンドから選び、必要な際には少し編集して送信すれば良いので、返信文を考えて入力する手間を省くことができます。
例：slackからのチャンネルアーカイブの提案
例：Gmailの返信文リコメンド
見えないフリクションまとめ
Stephen氏は、見えないフリクションに対して以下のようにまとめています。
「潜在的な課題のため、周囲を説得する際には目に見える形にすることが重要」と述べていました。
例：見えないフリクションへの対処方法の説明
境界フリクション(Boundary Friction)
３つ目の悪いフリクションは、境界フリクションです。
デバイスとデバイス、デバイスとユーザのインタフェース間で起きるフリクションのことです。インターフェース間のフリクションを取り除いた例が数多く紹介されました。
例：行動ログを取得する Timeflip
スライドに映っているのは、デスクの上に置く8面体のオブジェです。作業を各面に割り振って、「今何しているか」を上の面にして置き、作業が切り替わるタイミングでオブジェの向きを変えると、行動ログを取ることができます。
「オブジェの向きを変えるだけ」という非常に手間のかからない作業で行動ログが取れるため、フリクションが少ないです。こちらは、行動を取る人間と行動ログを取るコンピューターとのインターフェース間のフリクションを取り除いた例です。
例：スマートフォン・PC間でファイルをコピーするtangible
tangibleを使用すれば、スマートフォンとPCという別デバイス間でファイルをドラッグ&ドロップで移動できます。わざわざクラウドストレージやメールに添付して送信等の余計な手間を省くことができます。異なるデバイス間のインターフェースで発生するフリクションを取り除いた例です。
例：ジェスチャーによるSNSでのシェア
テレビを見ている時にジェスチャーをすると、その瞬間に流れている映像をスマートフォンに移してSNSでシェアをすることができます。
ユーザは会話・店舗・PC・スマホなど様々なメディア・サービス・デバイスによって、サービスを利用します。
ジャーニーマップはこれらの流れを重要視していますが、メディア間・サービス間・デバイス間における境界のフリクションを減らすことでサービスの利便性が格段に向上します。
境界フリクションまとめ
境界フリクションへの対処として、ユーザーの一貫性の体験を提供するために組織のサイロを打開すべき
意図的なフリクション(Intentional Friction)
4つ目の悪いフリクションは、意図的なフリクションです。
フリクションは必ずしも完璧に取り除く必要はなく、時には有効に用いるべきフリクションもあります。
意図的なフリクションは、セキュリティの確保が重要視されるシーンや注意喚起が必要なシーンに用いられることが多いです。
例：パスワードの制約・2段階認証
パスワードの漏洩は、個人情報の流出等の重大な危険につながります。そこで以下のような対策が講じられることが多々あります。
- 数字の連番等の平易なパスワードを許容しない
- 多要素（画像認証・指紋認証etc）を用いた認証方法を用いる
上記の対策は、ユーザから見ると負担(フリクション)ですが、システムの堅牢性とユーザの個人情報保護のためには非常に効果があります。
例：NRKスパムコメントの削減
NRKのWebサイトでは記事に対してコメントを書く前に、クイズを出します。このクイズは記事の内容を読まないと分からないないようです。クイズに正解することで、ユーザが本当に記事を読んだことを確認しています。そうすることで、悪意のあるユーザからのスパムコメントを排除しています。
例：フェイクプログレスバー
プログレスバーによってあたかも時間のかかる処理だとユーザに思わせます。
例え瞬時に終わる処理でも、あえてフェイクのプログレスバーをゆっくり動かして時間がかかっているようにみせることで「しっかり処理されている」という心理をあたえます。
そうすることで、ユーザは自分が入力した内容が漏洩することはないだろうという信頼感をサービスに対して抱きやすくなり、サービスを利用する際の安心感を提供しています。
意図的なフリクションまとめ
意図的なフリクションはセキュリティなどで利用されることがある
学習フリクション(Learning Friction)
5つ目の悪いフリクションは、学習フリクションです。
新しいことを学習する際に起きるフリクションです。例えば、学習やゲーム・スポーツなどはトライ&エラーを細かい単位で繰り返して次第に能力が向上していきます。フリクションを経験することで、ユーザがメリットを享受できます。
通常、フリクションは悪いもの、排除すべきものと見なされており、UI/UXデザインはそれを改善していくものです。
一方ゲームやスポーツでは、フリクションを意図的に与えることで楽しみにつながる場合もあります。
UXデザインとゲームデザインの対比
UXデザインとゲームデザインは、意図的なフリクションが楽しみにつながる点で矛盾するものではなく、類似していると考えられます。
ユーザにあえて考えてもらうきっかけを作るために、意図的なフリクションを残しておきます。ゲームであれば、レベルアップをコツコツ行うことで、より強い敵を倒せるようになる、という仕組みです。
アメリカの健康保険
例：健康保険の膨大な種類
アメリカの健康保険はとても複雑で理解しづらいものです。とにかく多くの選択肢や派生があり、とても簡単には選べません。控除対象が本人なのか、家族も含まれるのかなど把握しきれないほどにあります。
例：健康保険のリストアップ
健康保険の種類をリストアップすると、散在していた状態よりも分かりやすくなります。
ところが、これでもまだ十分な理解には及ばないだけでなく、一覧性もありません。結局正確に理解できないため、比較しづらい状態からは抜け出せていません。
例：スライドバーによる比較シミュレーター
そこで、プランの選択肢を適切な抽象度で可視化し、一方で複雑な部分は隠します。それぞれの健康保険の詳細が完璧に理解できる状態ではないものの、一目で金額や概要、控除対象等の主要な情報を理解することができるようになりました。
スライドバー等の操作によって比較できるシミュレーターが、健康保険の難解な違いを解消しています。
例：東京の鉄道網
また、学習フリクションがそもそも学習する必要があるのかという点を考える必要があります。東京をはじめ、多くの大都市では鉄道網・地下鉄網がとても複雑です。これをユーザが正確に理解する必要があるかを検討します。
例えば、複数の場所を一度に訪れたい旅行者であれば、複雑な路線図を理解せずとも目的地にたどり着けるシンプルなルートだけ分かれば良いです。
一方で、しばらく滞在して東京の隅々まで訪れたいと思っている滞在者は、目的地を網羅できるように複雑な路線図をしっかり理解する必要があります。このようにユーザの要求レベルによって情報量を増減したり、必要以上の複雑さを隠したりすることも効果的です。
学習フリクションまとめ
学習フリクションは、わかりにくい複雑なものを楽しい学習体験とさせる方法
外的フリクション(External Friction)
6つ目の悪いフリクションは、外的フリクションです。
私たちが自力では解決できないフリクションのことを指します。
具体的には下記のような存在です。
- ビジネスパートナーシップ/協定
- 業界の規定
- プラットフォームの変更
- 企業文化
- 技術的な限界
- 古い法規
イーロンマスクのような超人であれば業界の規定に立ち向かい、フリクションを解決出来るかもしれませんが、我々が解決できる外的フリクションはほとんどないでしょう。
外的フリクションを与えている理由を考え、例えば改善可能かどうかに取り組みます。加えて、その取り組みは費用対効果が高いのか、本当に取り組む価値があるのかを慎重に検討する必要があります。
外的フリクションの例
外的フリクションまとめ
ステファン氏からのメッセージ
フリクションに対して、「なぜ？」と常に問うことが重要であると感じました。特に学習フリクションについては、自身で再定義してみて欲しいと思います。これが学習フリクションになりうるのではないか、等新しい発見があるはずです。
