新宿のWeb制作会社|ソーイ
ホームページ制作
ランディングページ制作

インタラクションコストの削減で使い勝手の良いWebサイトを

ユーザーインターフェース(UI)は技術の進化やデザインの進化に伴い大きく変わります。ユーザーがWebサイトに来てから、必要としている情報を得るまでにかかるコストは極力抑えなければなりません。できるだけノンストレスな操作性、かつユーザーの想像と実際の動きが同じであることが望ましいです。

こういったユーザーのアクションとそれに返すリアクションによるコストをインタラクションコストといいます。例えばスマホでマナーモードにするためには、iPhoneの場合は側面にあるボタンをカチッとするだけですね。ただ昔の折りたたみ携帯は携帯を開いてマナーモードボタンを長押ししなければなりませんでした。マナーモードにすることのインタラクションコストはずっと下がったわけです。思えば私が今持っているPocket WiFiは、旧機種ではボタンをカチっとするだけで電源ON/OFFできたのですが、新機種はなぜかボタン長押しで電源ON/OFFになるという、非常に使い勝手が悪く毎回ストレスを感じます。些細なことですがインタラクションコストがずっとあがってしまいました。

Webサイトで、このインタラクションコストはどのように考えるか。例えばECサイトで何かを検索して、カートに入れ、購入決裁をするまでには様々なインタラクションコストがあります。検索窓に検索キーワードを入れるコスト、カートに入れるコスト、個数を決めるコスト、決済フローを進めるコスト。当然これらのコストをゼロにすることはできません。しかし、このようにユーザーフローを分解し、購入に至るまでにユーザーがやるべきアクションを整理していき、その1つ1つのインタラクションコストと向き合うことでWebサイト全体の使い勝手が格段に変わります。

例えば、検索窓に検索キーワードを入れるコストですが、サジェスト機能があるとないとではコストに大きな差がでますし、検索窓が大きいか小さいによってもコストは変わります。また、フリーワード検索とカテゴリー絞り込みの併用が簡単にできるかなど、検索するというアクション1つとっても非常に多くの要素が絡んでいます。

ハンバーガーメニュー(≡マーク)1つとってもそうです。ハンバーガーメニューを開くコストは少なからずあるので、本当に見せたいメニューだけを3つほど、最初からトップページ上部に表示しておくことも一考の価値はあります。スマホサイトはハンバーガーメニューにすることが一般的ですが、実際にハンバーガーメニューがないサイトも多くありますし、弊社でもそういったサイトを作ることもあります。

インタラクションコストを下げるために様々なアプローチが考えられますが、そのアプローチを考える上で、デバイス上でユーザーがとれる物理的なアクションを整理することが1つのヒントになると思います。例えばPCであれば、クリック、マウスオーバー、スクロール、キーボード操作などがあり、スマホでは、タップ、スクロール、スワイプ、文字入力(日本語/英数字など切替あり)などがあります。クリックするよりもマウスオーバーした時点で情報が見れる方が親切な場合もありますし、スマホで下にスクロールするよりスワイプした方が小さな画面の中でより多くの情報を見やすくできる場合もあります。また、お問合せフォームなどで、電話番号入力をする際に、ユーザーが自分で文字入力を数字入力にに変えなければならないフォームは多く見られますが、自動的に数字入力に切り替えることはできます。

Webサイトではコンバージョンするまでに、こういったアクションとリアクションがいくつも重なってWebサイトのコンバージョンまでたどり着きます。それを考えると、各アクションにおけるインタラクションコストの削減はコンバージョン率を左右する重要な要素であると言えます。