UIデザインはインタラクションコストで劇的に良くなる

先日noteを始めてからUIデザインは「分かりやすく」「使いやすく」を重視すべきと書いてきました。

その理由は最もUIデザイナーにとって重要にもかかわらず、UIデザイナー自身が理解していない事が多いためです。

では実際にどう「分かりやすく」「使いやすく」するのか、もっと実践で使える具体的な方法を教えろよ！
という方もいるかと思うので、今回はインタラクションコストを使ったアプローチを紹介します。

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

ユーザーがサイトやアプリを訪れてから目的を達成して結果を得る為に使用する以下のような全ての労力を指します。

・スクロール
・探す
・カーソル移動
・読む
・情報の理解
・クリック(タップ)
・入力
・読込みにかかる待ち時間
・注目する対象の切替え
・タスク達成のために覚えておく必要のある情報の量

例えばGoogleでキーワード検索をする場合、Googleに訪れてから発生するコストは以下のようになります。

①テキストフィールドを探す
②カーソルを移動してクリックする
③キーワードを入力する
④カーソルを移動して検索ボタンをクリックする
⑤検索結果が出るのを待つ
⑥スクロールする
⑦検索結果の見出しとテキストを見て理解する
⑧開くサイトを決定する
⑨カーソルを移動させる
⑩クリックする

例えば④の検索ボタンを押す動作は、キーワード入力後すぐにPCではEnterキー、スマホでは確定と同時に実行できた方がインタラクションコストは低くなります。

このようにユーザーは目的を達成するための方法が複数存在する場合、できる限りインタラクションコストを下げて期待効用を大きくする選択肢を選びます。

期待効用とは？

期待効用は以下から導き出せます。

期待効用 ＝ 期待するメリット － 期待するインタラクションコスト

期待効用を上げる為にはメリットを上げるかコストを下げるかの2択です。

ブランディングやマーケティングでメリットを引き上げる事は出来ますが、多くの場合UIデザインでアプローチ出来るのはインタラクションコストです。

UIによってインタラクションコストを下げられる方法があるかどうかを常に模索し、方法がある場合はぜひ実装を検討してみましょう。

ではなぜ期待効用を上げなければいけないかというと、期待効用の比較はサイトやアプリ単位でも行われ離脱の原因になるからです。

Yahoo!とGoogleを比較

①のテキストフィールドを探すアクションをYahoo!とGoogleで比較した場合、トップページの情報量の違いからGoogleの方が見つけやすいはずです。

さらに検索結果もYahoo!には広告などのノイズがあるためGoogleの方が⑦の検索結果内容を理解するインタラクションコストも低くなります。

多くのユーザーから見てキーワード検索という観点ではYahoo!よりもGoogleの方が優れていると判断できます。

このようにインタラクションコストを考慮して各フェーズを見直す事で、より最適なデザインを当てはめる事ができます。

ハンバーガーメニュー

スマホのサイトではハンバーガーメニューがよく使われますが、何も考えずに安易に採用していませんか。

ハンバーガーメニューは探して開く必要がある為、あらかじめ表示されているメニューよりもインタラクションコストが高くなります。

あなたのサイトがもし訪れるユーザーの殆どが決まったコンテンツを見るのであればその項目だけでもハンバーガーメニューから外に出す事を一度検討してみてください。

ゲームの報酬受取り

F2Pのゲームアプリでは殆どの場合ログインボーナスなどの報酬を受取るボックスが存在します。

そういった報酬の受取りも、1件ずつしか受け取れない場合は一括受取りボタンを検討しましょう。

サーバーの負荷といった理由は運営都合のものでありユーザーには全く関係がないものです。

どうしても一度にすべて受取る選択が難しい場合もボックスを経由しない直接受取りや10件ずつ受取り可能にするなどインタラクションコストを下げる方法を模索してみてください。

コンバージョン率アップにも効果的

多くの方が気にするコンバージョンにはそこに至るまでのフェーズがありインタラクションコストが必ず発生します。

そのためインタラクションコストを下げる事はコンバージョン率を上げる事にも繋がるという事です。

UIデザイナーはそのインタラクションコストが適切かどうか常に目を光らせておきましょう。