はじめに

本記事では、UI・UXデザイン方面でつよつよになりたい筆者が、UI・UXデザインに取り組んでいくなかで身に染みて感じたことを書いています。

どっちのフォームがいいですか

以下は何らかのサービスに新規登録する場合の入力フォームです。
パっと見で、どちらの入力フォームがより「わかりやすく」、「使いやすい」でしょうか？

②のフォームに比べて、①のフォーム、「わからない」し「めんどくさい」のでは？

わからない・めんどくさいUI/UXはユーザーの離脱を招く、いわばUI/UXデザインを志す我々にとっての宿敵です。
というわけで今回は、この宿敵「わからない」→認知負荷 、「めんどくさい」→インタラクションコストのお話です。

認知負荷とは？

認知負荷とは、ユーザーが情報を処理したり理解したりする際にかかる「頭の中の負担」です。
UIが複雑だったり情報が多すぎたりすると、ユーザーは何をすべきかわからなくなり、その状況にストレスを感じます。
そしてストレスを感じたユーザーは、「わかんねえ、知らねえ、や～めた！」と離脱してしまうのです。

①の認知負荷がなぜ高いのか

①は、メチャメチャに入力項目が多くてわかりにくいフォームです。
そしてエラーメッセージは「どの項目がエラーなのかわからない」内容になっています。
また、地味なところですが[登録]や[キャンセル]のボタンも重要度を度外視して全部同じボタンです。
統一感はあるといえばありますが、ユーザーはどれを押すか 「よく読まないと」 わかりません。
(ちなみに押し間違いのリスクも高いです。こちらは後述のインタラクションコストに関わってきます。)

認知負荷を減らす

②の例では、フォームはユーザー登録に必須の情報(メールアドレス・パスワード)に絞って情報量を減らしています。
また、エラーメッセージは該当するフォームの色を変えつつ、すぐ近くに具体的なエラー内容を表示することで、ユーザーがエラーの内容と場所をすぐに把握できるようにしています。
そして、ボタンも[登録]と[アカウントをお持ちの方はこちら]に絞ったうえで、より優先度の高いボタン(登録)を最も目立つデザインにしています。

インタラクションコストとは？

インタラクションコストとは、ユーザーがタスクを達成するために必要な「時間と労力」です。
クリック、スクロール、フォーム入力などの操作全体にかかる物理的な負担が多いと、ユーザーはタスクを達成するのに無駄な労力を割かされるためストレスを感じます。
そしてストレスを感じたユーザーは「だる。めんどくさ。や～めた！」と離脱してしまうのです。

①のインタラクションコストがなぜ高いのか

大量のフォームがあることにより、まずユーザーは大量の情報入力を強いられます。
そしてフォームの多さゆえにスクロールの手間も発生します。
スクロールしながら頑張って入力して[登録]を押したユーザーですが、どこかに入力のエラーがあったようです。何故か新規登録画面に戻され、頑張ってスクロールしていくと「入力内容にエラーがある」というメッセージが一番下に表示されています。
そしてユーザーは、どの項目に入力エラーがあったかを、今度は画面を上にスクロールしながら探していく羽目になるのです。
ただ登録したいだけなのに、めんどくさいですよね。

インタラクションコストを減らすには

②の例では、ユーザー登録に必要な最低限の情報のみをユーザーに入力させるようにしています。
「ユーザー登録には名前とか住所とか必要なのでは？」と思うかもしれませんが、それらはユーザーが実際に登録を行った後に確認メールを出して、そのリンクを押させた後にでもやってもらえばいいのです。
結果的にユーザーの入力量は同じかもしれませんが、まず登録のハードルを下げることが大事かなと思います。登録すらしてくれなかったら、そのユーザーはサービスの顧客になってくれません。
とはいえ、クリック量やページの遷移量があまりにも多いと、インタラクションコストが上がってしまうので、わかりやすさとのトレードオフにはなります。

認知負荷とインタラクションコストの違い

	認知負荷	インタラクションコスト
焦点	頭の中で考える労力	実際の操作にかかる労力
例	ラベルやボタンの意味を考える	クリックやスクロールの回数
解決策	情報を整理して直感的に理解しやすくする	ステップを減らして操作を簡単にする

なお、インタラクションコストが高いと、認知負荷も高くなりやすいです。例えば、不要なクリックや入力が多いと「次に何をすればいいのか？」と迷い、認知負荷が増します。
逆に、認知負荷が高いUIは操作ミスが増え、結果的にインタラクションコストが高くなることがあります。(①のボタンの例ですね！)

まとめ

認知負荷とインタラクションコスト。どちらも減らすことを意識することで、ユーザーが迷わず、気持ちよく利用できるサービスを提供できます。
「わからない」と「めんどくさい」を排除して、「シンプルで直感的なデザイン」 を目指したいですね！